Propriedade Vertical-align do CSS não funciona? Erro? Bug?
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.
