HTML - Imagens e Texto

Imagem e texto são os 2 componentes html mais usados e os que nos causam muitos problemas quanto ao alinhamento de um elemento com o outro.

A imagem quando é exibida ocupa x pixels de largura e y pixels de altura e o texto tem sua largura e altura próprias e distintas da imagem em com isso muitas vezes o design da página fica tremendamente deselegante com lacunas, desalinhamentos e perdemos tempo tentando fazer o alinhamento correto da imagem com o texto.

Note que tanto a tag img como o texto são inline e por isso foram exibidos um ao lado do outro. Como as alturas e larguras são diferentes entre os elementos, isto nos traz muitos problemas.

O parametro align da tag img pode alinhar a imagem à esquerda(left) ou à direita(right).
Contudo se colocar-mos texto junto com a imagem este será alinhado, por default, à esquerda e o início dele será no topo superior esquerdo da imagem e, se for longo, o texto será exibido na linha debaixo e assim por diante.

Outro problema que não podemos esquecer é a

largura da tela

. Ao renderizar o texto o browser renderiza para a largura da janela do browser. Mas e se a largura da janela do browser for modificada ? Com certeza o texto será afetado. A imagem não, ela não pode ser 'quebrada'para a próxima linha.

A melhor discussão do problema é feita pela prática e uso dos mesmos.

Não se esqueça de alterar a largura da janela do browser para ver como o design é afetado.

Imagem e texto à esqueda (default)

Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.

O texto não ficou alinhado ao centro da imagem e tudo que a gente for escrevendo vai sendo colocado ao lado da imagem de cima para baixo.

O código acima utilizado foi o seguinte :

<img src="../imagens/sk01a013.jpg" width=120 height=90 border=0 align="left">
Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.

Se colocarmos texto logo após a imagem ele vai ser escrito do topo até o fim da imagem, sem qualquer alinhamento vertical e outros elementos.

Ainda coloquei 4 brs para separar a imagem/texto do que eu queria dizer a seguir porque senão o que eu queria dizer ficaria ao lado ou logo abaixo da mensagem 'Neste caso....'

Note que ao alterar a largura da tela o texto é deslocado para a linha de baixo mas a imagem nunca.

Imagem à direita e texto à esquerda

Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.

O código da imagem foi o seguinte :
 
 <img src="../imagens/sk01a013.jpg" width=120 height=90 border=0 align="right">
 Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.

Novamente para separar o conteúdo acima desta mensagem tive que dar 3 brs senão esta mensagem seria escrita logo à esquerda ou abaixo da mensagem 'Neste caso....'

Note que nesta caso como a mensagem é pequena e alinhada à esquerda ficou distante da imagem que era alinhada à direita.

Note que ao alterar a largura da tela o texto é deslocado para a linha de baixo mas a imagem nunca.

Sendo assim notamos que a imagem é exibida num ponto (esquerda ou a direita) e fica estática lá mesmo no redimensionamento da largura do browser. Contudo o texto sofre a manipulação do browser sendo sua exibição alterada pela largura do browser.

Note bem que essa 'quebra' do texto em linhas é feito pelo browser por default mas podemos alterar as regras de quebra de linha com o comando: style="line-break: que pode ser auto,inherit,initial,loose,normal,strict ou unset.
Contudo verá que o texto sempre estará contido numa tag ( no mínimo pela tag body ) e por isso sempre respeitará a largura de sua tag container.
Por este motivo você nunca verá um texto aumentando a largura da janela do browser como, por exemplo, exibindo o scroll horizontal do browser por causa dele.

Outra tag que mexe com a quebra do texto é a word-wrap ou overflow-wrap. Ela define como as palavras podem ser quebradas mas não mexe com os espaços entre as palavras que são os pontos default de quebra de texto. Note que 'word-wrap' ainda está em fase experimental e ainda não é recomendável seu uso.

Como o que funciona para a direita é o mesmo que funciona para a esquerda vou trabalhar somente com a esquerda nos exemplos abaixo.

Imagem à Esquerda e texto à direita alinhado verticalmente 1

Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.

Consegui este efeito embutindo o texto dentro de um span com o seguinte código:
Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.

Consegui alinhar o texto no centro da imagem com o recurso margin-top e display:block mas isso é muito feio e se você redimensionar a janela do browser vai ver que para telas grandes está no centro e em telas pequenas não.

Imagem à Esquerda e texto à direita alinhado verticalmente 2

Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.

Código:
 <div>
 
 <img src="../imagens/sk01a013.jpg" width=120 height=90 border=0>
 
 
 Neste caso temos a imagem de 120 * 90 pixels à esquerda do texto que é bem pequeno.
 
 </div>

No exemplo acima mudei o estilo para display:inline-block o que faz com que a tag p seja exibida com estilo em linha misturado com em bloco.

Quando a tela é grande o texto é exibido ao lado da imagem e perfeitamente alinhado verticalmente.
Quando o texto não cabe na tela ele é exibido como se fosse em bloco, ou seja, na linha logo abaixo.
É por isso que o estilo é chamado inline-block, porque se comporta como inline na tela grande e bloco em tela pequena.

Com certeza o recurso style="display:inline-block" é uma boa opção para resolver o problema de alinhamento de imagem e texto.