É possível alinhar o texto verticalmente dentro de um div? [duplicado]
- Como faço para alinhar o texto verticalmente num div? 28 respostas
o código abaixo (também disponível como uma demonstração no JS Fiddle ) não posiciona o texto no meio, como eu preferiria. Não consigo encontrar nenhuma forma de centrar verticalmente o texto num div, mesmo usando o margin-top atributo. Como posso fazer isto?
<div id="column-content">
<img src="http://i.stack.imgur.com/12qzO.png">
<strong>1234</strong>
yet another text content that should be centered vertically
</div>
#column-content {
display: inline-block;
border: 1px solid red;
position:relative;
}
#column-content strong {
color: #592102;
font-size: 18px;
}
img {
margin-top:-7px;
vertical-align: middle;
}
10 answers
Crie um recipiente para o seu conteúdo de texto, um span talvez.
#column-content {
display: inline-block;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
/* for visual purposes */
#column-content {
border: 1px solid red;
position: relative;
}<div id="column-content">
<img src="http://i.imgur.com/WxW4B.png">
<span><strong>1234</strong>
yet another text content that should be centered vertically</span>
</div>A.) Se você só tem uma linha de texto:
div
{
height: 200px;
line-height: 200px; /* <-- this is what you must define */
}<div>vertically centered text</div>B.) Se você tem várias linhas de texto:
div
{
height: 200px;
line-height: 200px;
}
span
{
display: inline-block;
vertical-align: middle;
line-height: 18px; /* <-- adjust this */
}<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>Actualizar Abril 10, 2016
As Flexboxes devem agora ser usadas para alinhar os itens verticalmente (ou mesmo horizontalmente).
<div class="flex-container">
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
</div>
<style>
.flex-container {
display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
}
</style>
Um bom guia para flexbox pode ser lido em CSS Tricks . Obrigado Ben (de comentários) por apontar, não teve tempo para atualizar.
Um bom tipo chamado Mahendra postou uma solução muito funcional aqui.
A seguinte classe deve tornar o elemento horizontal e verticalmente centrado na sua pai.
.absolute-center {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
<div id="column-content">
<div>yet another text content that should be centered vertically</div>
</div>
#column-content {
border: 1px solid red;
height: 200px;
width: 100px;
}
div {
display: table-cell;
vertical-align:middle;
text-align: center;
}
Também funciona com <br /> em "mais um..."
Tenta isto:
HTML
<div><span>Text</span></div>
CSS
div {
height: 100px;
}
span {
height: 100px;
display: table-cell;
vertical-align: middle;
}
#column-content {
--------
margin-top:auto;
margin-bottom:auto;
}
Para tornar a solução de Omar (ou de Mahendra) ainda mais universal, o bloco de código relativo ao FireFox deve ser substituído pelo seguinte:
/* Firefox */
display:flex;
justify-content:center;
align-items:center;
O problema com o código do Omar, caso contrário Operacional, surge quando se quer centrar a caixa no ecrã ou no seu antepassado imediato. Esta centralização é feita ajustando a sua posição para
position: relative; ou position:static; (não com posição:absoluta nem fixa).
E depois margem: auto; ou margem-direito: auto; margem-esquerda: automática;
Debaixo deste centro de caixas alinhando o ambiente, a sugestão do Omar não funciona. Também não funciona na IE8 (ainda 7,7% de market share). Assim, para o IE8 (e outros navegadores), deve ser considerada uma solução de trabalho, como visto em outras soluções acima.Esta é a maneira mais simples de o fazer se precisar de várias linhas. Envolver o span ' D texto noutro span e indicar a sua altura com line-height. O truque para várias linhas é reiniciar o interior span ' s line-height.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
Claro que o exterior span pode ser um divou o que te fez
Adicionar um alinhamento vertical ao css #column-content strong também:
#column-content strong {
...
vertical-align: middle;
}
Veja também o seu exemplo actualizado .
= = = actualização = = =
Com um espaço em torno do outro texto e outro alinhamento vertical:
Html:
... <span>yet another text content that should be centered vertically</span> ...
Css:
#column-content span {
vertical-align: middle;
}
Veja também o próximo exemplo.
Eu sei que é totalmente estúpido e você normalmente não deve usar tabelas quando não criar tabelas, mas: as células da tabela podem alinhar várias linhas de texto centrado verticalmente e até mesmo fazer isso por padrão. Então, uma solução que funciona muito bem pode ser algo assim:
Html:
<div class="box">
<table class="textalignmiddle">
<tr>
<td>lorem ipsum ...</td>
</tr>
</table>
</div>
Css: (fazer com que o item da tabela encaixe sempre na caixa div)
.box {
/* for example */
height: 300px;
}
.textalignmiddle {
width: 100%;
height: 100%;
}