Aprenda como alinhar qualquer elemento HTML na vertical com apenas três linhas de CSS. A técnica consiste em usar a propriedade CSS transform, que normalmente é usada para girar elementos. Além dela utilizamos também a função translateY. Dessa forma centralizamos qualquer elemento na vertical, mesmo sem sabermos a altura do elemento.
Recomendo que leia também o artigo 10 Efeitos com Propriedades CSS3.
Isso é tudo que você precisa:
.elemento {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Utilizando o mesmo CSS você pode alinhar na vertical imagens, textos, etc. Veja uma demonstração:
Uma propriedade que não funciona como muitos esperam é A propriedade CSS vertical-align. Essa propriedade usamos quando o elemento a ser centralizado é um elemento inline. Para alinhar elementos nível de bloco (block) utilize a técnica mostrada neste artigo.
Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew.