Tenho um elemento div que contém texto, e quero alinhar o conteúdo deste centro div verticalmente.
Aqui está o meu estilo de mergulho:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Qual é a melhor maneira de fazer isto?
Você pode tentar esta abordagem básica:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
No entanto, só funciona para uma única linha de texto, porque definimos a altura da linha para a mesma altura do elemento que contém a caixa.
Esta é outra forma de alinhar o texto verticalmente. Esta solução funcionará para uma única linha e múltiplas linhas de texto, mas ainda requer um recipiente de altura fixa:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
O CSS apenas dimensiona o <div>
, centro vertical alinha o <span>
ao definir a altura da linha do <div>
igual à sua altura, e torna o <span>
um bloco em linha com o `alinhamento vertical: meio
. Em seguida, a altura da linha volta ao normal para o <span>
, para que o seu conteúdo flua naturalmente dentro do bloco.
E aqui está outra opção, que pode não funcionar em navegadores mais antigos navegadores que não suportam display: table
e display: table-cell
(basicamente apenas Internet Explorer 7). Usando CSS nós simulamos o comportamento da tabela (já que tabelas suportam alinhamento vertical), e o HTML é o mesmo que o segundo exemplo:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Esta técnica utiliza um elemento absolutamente posicionado em cima, em baixo, à esquerda e à direita para 0. É descrita com mais detalhes num artigo da revista Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.
Você pode fazer isso facilmente adicionando a seguinte peça de código CSS:
display: table-cell;
vertical-align: middle;
Isso significa que o seu CSS finalmente se parece:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
Para uma única linha de texto (ou um único caracter) você pode usar esta técnica:
Pode* ser utilizado quando a #caixa
tem uma altura não fixa, *altura relativa em %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Veja uma demonstração ao vivo em JsBin (mais fácil de editar CSS) ou [JsFiddle][2] (mais fácil de alterar a altura do quadro de resultados).
Se você quiser colocar texto interno em HTML, e não em CSS, então você precisa embrulhar o conteúdo do texto em elementos adicionais inline e editar #box::after
para combinar. (E, é claro, a propriedade content:
deve ser removida).
Por exemplo,
<div id="box"><span>TextContent</span></div>
.
Neste caso, #box::after
deve ser substituído por #box span
.
Para Internet Explorer 8 suporte você deve substituir ::
por :
.