Banner propaganda da DevMedia - Cursos de desenvolvimento web

Autor: Russ Weakley
URL do original:http://www.maxdesign.com.au/2008/10/05/vertical-align/
Título original: Aligning inline images with the vertical-align property
Traduzido com autorização expressa do autor.

Alinhando imagens com a propriedade vertical-align

Publicado em: 16/10/2008

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.

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; }

Texto mostrando imagem alinhada com linha top

Text-top

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

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.

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.

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.

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.

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

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

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.

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

Texto mostrando imagem alinhada com uso de porcentagem positiva

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

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

Texto mostrando imagem alinhada com uso de pixel positivo

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?

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo