A propriedade CSS vertical-align

Introdução

A propriedade CSS vertical-align foi introduzida com as CSS1, ampliada nas CSS2 e CSS3 e admite os seguintes valores:

baseline | sub | super | top | text-top | middle | bottom | text-bottom|
| inherit | inicial | unset | <percentagem> | <medida CSS>

Essa propriedade destina-se a alinhar verticalmente um elemento inline ou um elemento-filho de um elemento do tipo table-cell

Seguindo o raciocínio da dita semelhança, tentam posicionar um texto dentro de um elemento DIV com essa propriedade. E, surpresa! Não dá certo. Tentam com todos os valores acima mostrados e nada!

Exemplo ilustrando o valor middle:

div#falhou {
 font:12px Arial, Sans-serif;
 width: 200px;
 height: 150px;
 border: 1px solid #c30;
 background: #ffe;
 vertical-align: middle;
 }

<div id="falhou">
Texto no meio da DIV
</div>

Que resulta em fracasso (o texto não 'vai' para o meio) conforme mostrado a seguir:

Na maioria dos casos este é o primeiro contato que o iniciante tem com esta propriedade e a partir daí esquece e não se preocupa mais com ela pois 'descobre' que pode controlar o alinhamento vertical do texto, usando a propriedade line-height assim:

div#sucesso { 
 font:12px Arial, Sans-serif;
 width: 200px;
 height: 150px;
 border: 1px solid #c30;
 background: #ffe;
 line-height:150px;
 }

<div id="sucesso">
Texto no meio da DIV
</div>

Que resulta em sucesso (o texto 'vai' para o meio) conforme mostrado a seguir:

Afinal para que serve esta propriedade?

As Recomendações do W3C dizem que a propriedade vertical-align destina-se a alinhar textos verticalmente que estejam dentro de uma linha ou em uma célula de tabela.

Ops! então se eu declarar para o div#fracasso acima display:table-cell; vai funcionar, pois o DIV terá um comportamento de célula de tabela certo? Sei lá! Vamos experimentar e ver no que dá.

div#seila {
 width: 200px;
 height: 150px;
 border: 1px solid #c30;
 background: #ffe;
 vertical-align: middle;
 display: table-cell;
 }

<div id="seila">
Texto no meio da DIV
</div>

A propriedade finalmente funcionando

Vamos alinhar textos verticalmente que estejam dentro de uma linha (em uma célula de tabela fica por conta do leitor praticar), como diz a norma.

Tomaremos como base para os exemplos o seguinte texto:

Texto com uma palavra diferente dentro dele

Onde iremos controlar o alinhamento vertical de: palavra diferente dentro do texto

Exemplo 1 - Definindo um valor positivo de 30 pixel

span.diferente {
vertical-align: 30px;
}

<p>
Texto com uma 
<span class="diferente">
palavra diferente<span> 
dentro dele
</p>

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 2 - Definindo um valor negativo de 30 pixel

Igual ao anterior com -30px

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 3 - Definindo um valor em percentagem, igual a 40%

A percentagem refere-se ao valor de line-height do elemento. Se line-height não for definido vale o valor default para cada elemento.

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 4 - Definindo o valor super

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 5 - Definindo o valor sub

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 6 - Definindo o valor middle

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 7 - Definindo o valor text-top

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 8 - Definindo o valor text-bottom

Resultado:

Texto com uma palavra diferente dentro dele

Imagens e tabelas

Compartilhe essa matéria com seus amigos

Os sites do Maujor estão hospedados na DialHost.