Serei sincero: sempre achei que não funcionava direito; porém, era um ledo engano. Lendo o livro Construindo sites com CSS e (X)HTML do @maujor, descobri o motivo deste atributo “não funcionar” direito na maioria dos casos.

Sabe por que esta propriedade não funciona quando tentamos alinhar um parágrafo ou uma div?

Simples: porque ela foi criada para controlar o posicionamento vertical de elementos inline como: textos, imagens e inputs dentro de um parágrafo. A propriedade não funciona em elementos block.

Vejam só este exemplo:

Este é um texto que estou usando de teste para a propriedade vertical-align, vamos ver se ela alinha uma palavra em baseline, outra palavra com o valor middle na propriedade vertical-align e agora uma pequena frase com o valor text-bottom.

Postando porque tenho certeza que outras pessoas têm e terão essa mesma dúvida, espero que o post seja útil.

Compartilhe!