Alinhamento vertical com CSS

CSS 2 não suporta alinhamento vertical, por isso para alinhar verticalmente um conteúdo de uma camada temos que utilizar técnicas ou truques alternativos.
Por Miguel Angel Alvarez - Tradução de JML



Para os que estão acostumados a utilizar tabelas para construir páginas, parece estranho que com CSS não se tenha pensado uma maneira de alinhar verticalmente um conteúdo em um container. Quando tínhamos um conteúdo colocado em uma célula de uma tabela, utilizávamos o atributo valign=middle para alinhá-lo ao centro vertical da célula.

Porém, nas versões atuais de CSS (vamos pela CSS2), não se incorporou uma forma de definir o alinhamento vertical dos elementos. Imagino que haverá uma razão especial pela qual se decidiu não incorporar o alinhamento vertical em etiquetas DIV, mas a verdade é que os designers necessitam desse atributo, pelo menos em algumas ocasiões, para realizar seu trabalho.

Em breve finalizarão a versão CSS3, e então haverá uma maneira de alinhar verticalmente um conteúdo em uma camada, mas enquanto isso, devemos utilizar algum truque para consegui-lo.

Agora apresentarei um hack CSS para alinhamento vertical de elementos nas páginas. Os chamados hack CSS são como truques para definir estilos que dão problemas em distintos navegadores ou não existem maneiras de defini-los com as ferramentas atuais de CSS. Explicamos e demos exemplos de hacks CSS em um artigo anterior.

Hack CSS para alinhamento vertical por meio de uma imagem

Vamos mostrar um truque simples para alinhar verticalmente com CSS utilizando uma imagem. Aproveitaremos que a imagem tem um atributo vertical-align:middle; que serve para que o texto que está depois da imagem esteja alinhado a sua metade vertical.