Como alinhar a legenda com a foto em HTML

Escrito por jim campbell | Traduzido por alexandre lima
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alinhar a legenda com a foto em HTML
Use CSS para alinhar texto e imagem (Comstock/Stockbyte/Getty Images)

As tags <div> do HTML permitem que você alinhe imagens e legendas na sua página web. Elas usam as propriedades de alinhamento do CSS para dispor o conteúdo da DIV na esquerda, no meio ou na direita da página. Quando você não utiliza as DIVs, algumas das legendas não aparecem corretamente abaixo da imagem. Usar essa tag em conjunto com CSS permite alinhar perfeitamente as imagens em qualquer página.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Clique com o botão direito no arquivo que contém a imagem e as legendas e escolha "Abrir com..." no menu. Clique no editor HTML que você deseja usar para fazer o alinhamento.

  2. 2

    Adicione as tags <div> em torno da imagem e da legenda. DIVs são contêineres; dessa forma, você pode envolver qualquer elemento HTML com elas. O seguinte trecho de código é um exemplo de duas DIVs que contêm uma imagem e uma legenda:

    <div><img src="minhafoto.png"></div> <div>Frase da legenda</div>

  3. 3

    Defina o mesmo alinhamento para as DIVs. Por exemplo, se quiser deixar a imagem e o texto alinhados à esquerda, adicione o seguinte código dentro da definição da tag:

    style="margin-left: left; width: 100%; position: absolute"

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível