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 Nenhum, Esquerda, Certo, e Centro. Para além disso, também têm a possibilidade de Miniatura, Médio, Grande & Tamanho normal.
A imagem acima é centrado.
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.
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.
E agora vamos mudar as coisas para o alinhamento correto. 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 muito 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 fazê-las todas de novo com legendas!
A imagem acima é centrado. A legenda também tem uma hiperligação, só para ver se faz alguma coisa de estranho.
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.
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.
E agora vamos mudar as coisas para o alinhamento correto. 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 muito 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!