A propriedade CSS vertical-align

A propriedade CSS vertical-align foi introduzida com as CSS-1 (ampliada nas CSS-2 com a introdução do valor <medida CSS>) e admite os seguintes valores:

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

É uma propriedade que tende a frustar os iniciantes em CSS, que esperam dela um comportamento semelhante ao atributo HTML vertical-align que estão acostumados a usar.

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:

CSS:

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

HTML:

<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:

CSS:

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

HTML:

<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á.

CSS:

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

HTML:

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

Viva! funcionou (o texto ‘foi’ para o meio) conforme mostrado a seguir:

Putz! o IE outra vez! Funcionou para quem tem FireFox, Mozilla, Opera, Netscape e navegadores complacentes com as standards. Se você está com o IE6 ou mais antigo o texto ficou lá em cima. Alguém com a versão beta do IE7 aí? Se sim, pergunto: Funcionou?

Atualização em 19/12/2012: Esse código de centralização não funciona no IE7, mas funciona no IE8+. Se você deseja servir o IE7 terá que usar marcação adicional e regras CSS específicas, como mostrado a seguir:

CSS:

#container {
 width: 200px; 
 height: 150px; 
 border: 1px solid #c30;
 background: #ffe;
 position: relative;
 display:table; 
 }
#container p {
 *position: absolute; 
 top: 50%; 
 display: table-cell; 
 vertical-align: middle;
 }
#container span {
 display:block; 
 *position: relative; 
 top: -50%;
 }

HTML:

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

Oba! Agora funciona no IE7

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

CSS:

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

HTML:

<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
O alinhamento dos textos é pela linha mais alta dos textos. Mudei o tamanho de fonte para destacar visualmente o alinhamento.

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 8 – Definindo o valor text-bottom
O alinhamento dos textos é pela linha mais baixa dos textos. Mudei o tamanho de fonte para destacar visualmente o alinhamento.

Resultado:

Texto com uma palavra diferente dentro dele

Imagens e tabelas

Faça suas experiências com imagens e com tabelas.