12

screenshot do texto desalinhado

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente e horizontalmente dentro do campo branco?

Usei o seguinte código:

<ul>
  <li>
     <a>
       adote o ritmo da natuza: o segredo dela é a paciência.
     </a>
     <h2>Ralph Waldo Emerson</h2>
  </li>
<li>
ul{
    position: relative;
    width: 100%;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li{
    position: relative;
    width: 309px;
    height: 260px;
    background: #f3f2f1;
    float:left;
    margin: 0 19px 19px 0;

}
ul li  a{
    width: 257px;
    height: 170px;
    background: #fff;
    display: block;
    margin: 25px 0 0 25px;
    text-decoration: none;
    text-transform: uppercase;
    text-align:center;
    color: #f37021;
    font-family: Futura;
    font-size: 15px;
}
 ul li h2{
    font-family: Georgia;
    font-size: 14px;
    color: #111111;
    font-style: italic;
    text-align: center;
    margin: 0;
}
0

3 Respostas 3

9

1. Alinhando o texto no meio da célula

Crie uma div com a classe vertical contendo o texto. Depois use:

.vertical {
    vertical-align: middle;
    display: table-cell;
}

2. Rotacionando o Texto

Crie uma div com a classe vertical contendo o texto. Depois use:

.vertical {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg); /* opcional: Opera agora usa -webkit */
  transform: rotate(-90deg);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%; /* opcional: Opera agora usa -webkit */
  transform-origin: 50% 50%;

  /* Use se você quer que apareça para o IE8. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
7
  • Cigano Morrison Mendez, na verdade o que eu preciso é alinhar verticalmente e horizontalmente no espaço branco. Commented 7/03/2014 às 21:11
  • Expandi a resposta. Commented 7/03/2014 às 21:15
  • Alguém já perguntou no meta sobre o que fazer com propriedades prefixadas? IMHO nunca uso: quem irá copiar nossos códigos - e tenha certeza que farão - irão usar prefixos que nunca serão necessários. Exemplo? -o-. Commented 7/03/2014 às 21:20
  • 1
    -ms-: a Microsoft removeu grande parte dos prefixos. -o-: agora o Opera usa Webkit. Já falei por aqui do prefixfree mas recomendo o autoprefixer, ainda mais para respostas. Commented 7/03/2014 às 21:31
  • 1
    Testei seu código no autoprefixer, nas opções padrão: ele deixou os prefixos -ms- e -webkit-. Grande parte... Commented 7/03/2014 às 21:35
0

Porque não usar line-height ?

ul li{
    position: relative;
    width: 309px;
    height: 260px;
    background: #f3f2f1;
    float:left;
    margin: 0 19px 19px 0;
    line-height: 260px;
}

Para mim funciona bem.

Perdão pela gafe, não tinha visto que o texto possui espaçamento e que já tinha tentado o line-height.

-1

No seu caso, basta trocar de display:block para display: grid; e acrescentar o align-items: center; no ul li e a

ul{
    position: relative;
    width: 100%;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li{
    position: relative;
    width: 309px;
    height: 260px;
    background: #f3f2f1;
    float:left;
    margin: 0 19px 19px 0;

}
ul li  a{
    width: 257px;
    height: 170px;
    background: #fff;
    display: grid;
    align-items: center;
    margin: 25px 0 0 25px;
    text-decoration: none;
    text-transform: uppercase;
    text-align:center;
    color: #f37021;
    font-family: Futura;
    font-size: 15px;
}
 ul li h2{
    font-family: Georgia;
    font-size: 14px;
    color: #111111;
    font-style: italic;
    text-align: center;
    margin: 0;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
           <a>
             adote o ritmo da natuza: o segredo dela é a paciência.
           </a>
           <h2>Ralph Waldo Emerson</h2>
        </li>
</body>
</html>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .