Values

Para cada um dos seguintes valores, iremos aplicá-los a uma imagem embutida dentro de uma caixa de linha de um item da lista. A caixa de linha em cada uma das imagens tem uma borda cinza pontilhada. A linha que é usada para alinhar as imagens para cada valor é vermelha.

linha de base Este é o valor padrão. Ele alinha a linha de base do elemento com a linha de base da caixa de linha. Se o elemento não tiver uma linha de base, ele alinha a borda da margem inferior com a linha de base.

meio Alinha o ponto médio vertical do elemento com a linha de base da linha mais metade da altura x da linha (determinado pelo fonte).

Este é um dos valores mais comumente usados para vertical-align e geralmente é usado para alinhar ícones e marcadores de lista com o texto em linha.

sub Reduz a linha de base do elemento para a posição adequada para subscritos na linha. (Este valor não tem efeito no tamanho da fonte do texto do elemento.)

super Eleva a linha de base do elemento para a posição apropriada para sobrescritos na linha. (Este valor não tem efeito no tamanho da fonte do texto do elemento.)

text-top Alinha a parte superior do elemento com a parte superior da área de conteúdo da linha. A altura da área de conteúdo é alta o suficiente para o máximo de ascendentes e descendentes de todas as fontes na linha, e a linha de alinhamento é o topo dessa altura. Observe que a altura pode ser maior do que qualquer um dos tamanhos de fonte envolvidos, dependendo do alinhamento da linha de base das fontes.

text-bottom Alinha a parte inferior do elemento com a parte inferior da área de conteúdo da linha. A altura da área de conteúdo é alta o suficiente para o máximo de descendentes e ascendentes de todas as fontes na linha, e a linha de alinhamento é a parte inferior dessa altura. Observe que a altura pode ser maior do que qualquer um dos tamanhos de fonte envolvidos, dependendo do alinhamento da linha de base das fontes.

topo Alinha a parte superior do elemento com a parte superior do linha inteira. Isso significa que se houver outros elementos na linha, cada um com alturas diferentes, como várias imagens, por exemplo, o topo da linha será tão alto quanto a mais alta das duas imagens.

Se a linha tiver um line-height superior ao conteúdo mais alto da linha, a parte superior da caixa de linha será determinada por essa altura.

bottom

Alinha o elemento ao final da linha inteira.

Se a linha tiver um line-height que seja inferior ao conteúdo mais baixo da linha, a parte inferior da caixa da linha será determinada por essa altura.

< porcentagem > Elevar o elemento acima da linha de base (se o valor da porcentagem for positivo) ou diminuir o elemento abaixo a linha de base (se o valor da porcentagem for negativo) pelo valor especificado. O valor especificado é uma porcentagem do valorline-height. O valor0%significa o mesmo quebaseline.

< length > Eleve o elemento acima da linha de base (se o valor do comprimento for positivo) ou diminua o elemento abaixo da linha de base (se o valor do comprimento for negativo) pela quantidade especificada. Um valor ‘0’ significa o mesmo quebaseline.

Notas

Os valores top, bottom e middle comportam-se conforme o esperado quando aplicados a elementos de célula de tabela. No entanto, outros valores podem ter um comportamento inesperado em alguns navegadores. Chris Coyier diz isso melhor:

Ao usar o alinhamento vertical nas células da tabela, manter a parte superior, inferior e central é sua melhor aposta. Nenhum dos outros valores faz muito sentido de qualquer maneira e tem resultados imprevisíveis em navegadores diferentes. Por exemplo, definir uma célula como texto inferior alinha o texto na parte inferior no IE 6 e na parte superior no Safari 4. Definir como sub causa o alinhamento do meio no IE 6 e superior no Safari 4.

O alinhamento vertical padrão para células da tabela (<td>) é middle. No entanto, o alinhamento vertical padrão para um elemento de nível de bloco que tem display: table-cell ainda é top, que é o alinhamento padrão para nível de bloco recipientes em geral. Veja a seção de demonstração abaixo para um exemplo ao vivo.