Alinhando imagens com a propriedade vertical-align

Introdução

Recentemente alguém me fez a seguinte pergunta:

Como alinhar uma pequena imagem inserida no texto de um parágrafo?

Resposta

Considere o seguinte exemplo: um parágrafo contém uma linha de texto e uma pequena imagem representada pelo retângulo azul na figura a seguir.

Exemplo de texto com imagem inline

A seguir iremos examinar as 6 linhas que podem ser usadas para alinhamento vertical.

Linhas para vertical-align

1. top - linha tangenciando os pontos mais altos do conteúdo.

Texto mostrando linha top em vermelho

2. text-top - linha tangenciando os pontos mais altos do texto, inclusive acentuação.

Texto mostrando linha text-top em azul

Nota: As linhas top e text-top parecem ser a mesma. Contudo existem situações nas quais a linha top (mostrada na cor vermelha) é mais alta que o conteúdo e em consequência, mais alta que a linha text-top (mostrada na cor verde). Um exemplo desta situação ocorre quando existe uma imagem mais alta que a altura do texto, como mostrado a seguir:

Texto mostrando linhas top e text-top

3. middle - linha que passa pelo ponto médio de x-height (altura da letra x).

Texto mostrando linha middle em vermelho

4. baseline - linha na qual se assentam todas as letras do texto.

Texto mostrando linha baseline em vermelho

5. text-bottom - linha tangenciando os pontos mais baixos do texto, incluindo as descendentes (letras com descendentes: “j”, “y”, “g” etc).

Texto mostrando linha text-bottom em vermelho

6. bottom line - linha tangenciando os pontos mais baixos do conteúdo.

Texto mostrando linha bottom em vermelho

Alinhamento vertical padrão para imagens

Uma imagem alinha verticalmente, por padrão, com a linha baseline do parágrafo - exceto nos casos em que se defina uma margin-bottom para a imagem. Nestes casos, a parte inferior da imagem desloca-se verticalmente de um valor igual a margin-bottom em relação a linha baseline. No exemplo a seguir foi definida um margin-bottom: 5px para a imagem o que fez com que ela se assentasse 5px acima da linha baseline.

Texto mostrando margin posicionando a imagem acima da linha baseline

Usando CSS para alterar o alinhamento vertical padrâo

Você pode alterar o alinhamento vertical padrão de uma imagem em relação ao texto com uso da propriedade CSS vertical-align (link abre em novajanela).

Os valores para a propriedade são: top, text-top, middle, baseline, text-bottom, bottom, sub, super, porcentagem e medida CSS.

Top

O topo da imagem alinha com a linha top.

CSS
img.nome-classe { vertical-align: top; }

Texto mostrando imagem alinhada com linha top

Text-top

O topo da imagem alinha com a linha text-top.

CSS
img.class-name { vertical-align: text-top; }

Texto mostrando imagem alinhada com linha text-top

Middle

O ponto médio da imagem alinha com a linha baseline mais metade de x-height do parágrafo.

CSS
img.nome-classe { vertical-align: middle; }

Texto mostrando imagem alinhada com linha middle

Baseline

Este é o alinhamento padrão que também pode ser definido usando CSS.

CSS
img.nome-classe { vertical-align: baseline; }

Texto mostrando imagem alinhada com linha baseline

Text-bottom

A parte inferior da imagem alinha com a linha text-bottom.

CSS
img.nome-classe { vertical-align: text-bottom; }

STexto mostrando imagem alinhada com linha text-bottom

Bottom

A parte inferior da imagem alinha com a linha bottom.

CSS
img.nome-classe { vertical-align: bottom; }

Texto mostrando imagem alinhada com linha bottom

Sub

A parte inferior da imagem alinha com a linha baseline do conteúdo sobrescrito (ainda que não haja sobrescrito no texto).

CSS
img.nome-classe { vertical-align: sub; }

Texto mostrando imagem alinhada com linha sub

Super

A parte inferior da imagem alinha com a linha baseline do conteúdo superescrito (ainda que não haja superescrito no texto).

CSS
img.nome-classe { vertical-align: super; }

Texto mostrando imagem alinhada com linha super

Porcentagem

Desloca a imagem para cima (valores positivos) ou para baixo (valores negativos) da linha baseline, uma distância especificada em porcentagem. O valor ‘0%’ equivale a alinhamento com a linha ‘baseline’. Diferentes navegadores calculam diferentemente a distância especificada em porcentagem para alinhamento vertical.

CSS
img.nome-classe { vertical-align: 30% }

Texto mostrando imagem alinhada com uso de porcentagem positiva

CSS
img.nome-classe { vertical-align: -30% }

Texto mostrando imagem alinhada com uso de porcentagem negativa

Length

Desloca a imagem para cima (valores positivos) ou para baixo (valores negativos) da linha baseline, uma distância especificada em unidade de medida CSS. O valor ‘0px’ equivale a alinhamento com a linha ‘baseline’.

CSS
img.nome-classe { vertical-align: 2px }

Texto mostrando imagem alinhada com uso de pixel positivo

CSS
img.nome-classe { vertical-align: -2px }

Texto mostrando imagem alinhada com uso de pixel negativo

E você … Você acha que a propriedade CSS vertical-align é útil? Você usa esta propriedade para alinhar imagens inseridas nos conteúdos?

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.