Alinhamento vertical com CSS

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.

Então, faremos algo assim:

Definimos os estilos para uma imagem:

<style type=”text/css”>
img.valign {
   height: 100%;
   vertical-align: middle;
   width: 0px;
}
</style>

Nos estilos da imagem definimos que tenha height 100% para se adaptar à altura do container onde tivermos colocado. vertical-align:middle serve para que o texto que tiver antes ou depois da imagem. O atributo width: 0px nos serve simplesmente para que a imagem não tenha largura, visto que não queremos mostrar nenhuma imagem, nem que esta tome espaço na página, só queremos alinhar verticalmente.

Agora poderemos criar uma camada com um conteúdo alinhado na vertical, desta maneira:

<div style=’height:330px; background-color: #ccccff;’>
Conteúdo alinhado verticalmente. <img class=”valign” />
</div>

A etiqueta DIV pode ter a altura que desejarmos. A cor de fundo simplesmente foi colocada para que se vejam seus limites.

Podemos ver a imagem que se colocou dentro da camada, que tem class definida no css anterior. Não tem src nem nada, pois não necessitamos colocá-lo porque não queremos mostrar nenhum arquivo como imagem.

Podemos ver o exemplo em funcionamento em uma página à parte.

O exemplo funciona perfeitamente no Internet Explorer, Firefox e Opera, com o qual é um hack CSS perfeitamente usável e compatível com a maioria de sistemas.

O ruim é que este alinhamento vertical só funcionará no caso em que o conteúdo da camada não supere uma linha. No momento em que o texto da camada tiver várias linhas, só se alinhará verticalmente uma delas, a primeira ou a última, dependendo de onde tiver colocado a imagem, diante ou atrás do texto.