O que saber
- No HTML, coloque uma tag div ao redor da imagem:
- Adicione um atributo de estilo:
- Defina a largura div para a largura da imagem, adicione uma propriedade text-align, adicione espaço entre a imagem e a legenda e, em seguida, adicione a legenda do texto.
Este artigo explica como adicionar uma legenda à sua imagem da web e certificar-se de que a legenda permaneça com a imagem onde quer que você a mova na página da web.
Passos para uma legenda de imagem HTML
As legendas das imagens são importantes porque adicionam informações extras aos elementos visuais da página da web.
-
Adicione uma imagem à sua página da web.
-
No HTML da sua página da web, coloque uma tag div ao redor da imagem:
type = “código”>
-
Adicione um atributo de estilo à tag div:
type = “código”>
-
Defina a largura do div com a mesma largura da imagem, com a propriedade de estilo de largura:
type = “código”>
-
Para legendas ligeiramente menores que o texto ao redor, adicione uma propriedade font-size ao estilo div:
type = “código”>
-
As legendas ficam melhores se estiverem centralizadas abaixo da imagem, portanto, adicione uma propriedade text-align ao atributo style:
type = “código”>
-
Por fim, adicione um pouco de espaço extra entre a imagem e a legenda, adicionando um atributo de estilo à imagem com uma propriedade de estilo padding-bottom:
type = “código”>
-
Em seguida, adicione a legenda do texto diretamente abaixo da imagem:
Esta é minha legenda type = “code”> Carregue a página da web em seu servidor e teste-a em um navegador.
Dicas de legendagem
As dimensões CSS podem ter muitas medidas diferentes, portanto, geralmente você deve incluir o tipo de medida. Por exemplo: No entanto, as dimensões da imagem HTML são sempre em pixels, portanto, você deixa a medição desativada. Se você tornar a largura do div maior do que a largura da imagem, a legenda pode aparecer ao lado da imagem. Se é isso que você deseja, adicione um
tag diretamente antes da legenda e após a tag da imagem.
