Bem-vindo ao alinhamento de imagens! A melhor forma de demonstrar o fluxo e refluxo das várias opções de posicionamento de imagens é aninhá-las num oceano de palavras. Pegue num remo e vamos começar.

No que diz respeito ao alinhamento, é de salientar que os utilizadores podem escolher entre as opções de NenhumEsquerdaCerto, Centro. Para além disso, também têm a possibilidade de MiniaturaMédioGrande & Tamanho normal.

Image Alignment 580x300

A imagem acima é centrado.

Image Alignment 150x150O resto deste parágrafo é um enchimento para ver o texto a envolver a imagem 150×150, que é alinhado à esquerda

Como pode ver, deve haver algum espaço acima, abaixo e à direita da imagem. O texto não deve estar a rastejar sobre a imagem. O rastejamento não é correto. As imagens também precisam de espaço para respirar. Deixem-nas falar como as vossas palavras. Deixem-nas fazer o seu trabalho sem qualquer incómodo do texto. Em mais uma frase, veremos que o texto se move da direita da imagem para baixo da imagem numa transição perfeita. Mais uma vez, deixando o texto fazer o seu trabalho. Missão cumprida!

E agora, para um imagem de grandes dimensões. Tem também sem alinhamento.

Image Alignment 1200x400

A imagem acima, embora tenha 1200 px de largura, não deve transbordar a área de conteúdo. Deve permanecer contida, sem perturbar visivelmente o fluxo do conteúdo.

Image Alignment 300x200

E agora vamos mudar as coisas para o alinhamento à direita. Mais uma vez, deve haver muito espaço em cima, em baixo e à esquerda da imagem. Olha só para ele... Eh pá! Boa maneira de arrasar com o lado direito. Não me interessa o que a imagem alinhada à esquerda diz, tu estás ótimo. Não deixes que ninguém te diga o contrário.

Daqui a pouco, deve ver o texto a começar a ficar por baixo da imagem alinhada à direita e a assentar bem. Ainda deve haver bastante espaço e tudo deve estar bem posicionado. Sim... Assim mesmo. Nunca foi tão bom estar certo.

E quando pensavam que já tínhamos terminado, vamos fazer tudo de novo com legendas!

Image Alignment 580x300

Veja 580×300 a obter alguns legenda amor.

A imagem acima é centrado. A legenda também tem uma hiperligação, só para ver se faz alguma coisa de estranho.

Image Alignment 150x150

Legenda pequenina.

O resto deste parágrafo é um enchimento para ver o texto a envolver a imagem 150×150, que é alinhado à esquerda

Como pode ver, deve haver algum espaço acima, abaixo e à direita da imagem. O texto não deve estar a rastejar sobre a imagem. O rastejamento não é correto. As imagens também precisam de espaço para respirar. Deixem-nas falar como as vossas palavras. Deixem-nas fazer o seu trabalho sem qualquer incómodo do texto. Em mais uma frase, veremos que o texto se move da direita da imagem para baixo da imagem numa transição perfeita. Mais uma vez, deixando o texto fazer o seu trabalho. Missão cumprida!

E agora, para um imagem de grandes dimensões. Tem também sem alinhamento.

Image Alignment 1200x400

Comentário de imagem maciço para os seus olhos.

A imagem acima, embora tenha 1200 px de largura, não deve transbordar a área de conteúdo. Deve permanecer contida, sem perturbar visivelmente o fluxo do conteúdo.

Image Alignment 300x200

É bom estar sempre certo.

E agora vamos mudar as coisas para o alinhamento à direita. Mais uma vez, deve haver muito espaço em cima, em baixo e à esquerda da imagem. Olha só para ele... Eh pá! Boa maneira de arrasar com o lado direito. Não me interessa o que a imagem alinhada à esquerda diz, tu estás ótimo. Não deixes que ninguém te diga o contrário.

Daqui a pouco, deve ver o texto a começar a ficar por baixo da imagem alinhada à direita e a assentar bem. Ainda deve haver bastante espaço e tudo deve estar bem posicionado. Sim... Assim mesmo. Nunca foi tão bom estar certo.

E é tudo, yo! Sobreviveste às águas tumultuosas do alinhamento. Conquista de alinhamento de imagem desbloqueada!