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.

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.

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

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:

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

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

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

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

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.

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.

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

Text-top

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

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

Middle

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

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

Baseline

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

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

Text-bottom

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

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

Bottom

A parte inferior da imagem alinha com a linha bottom.

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

Sub

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

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

Super

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

img.nome-classe { vertical-align: 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.

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

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

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’.

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

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

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