Contente

• Passos
• Método 1 de 2: CSS (recomendado)
• Método 2 de 2: o atributo "align" em HTML

Atributo alinhar marcação html> está obsoleto desde HTML5. Embora esse atributo ainda funcione na maioria dos navegadores da web, é recomendável que você alinhe as imagens usando Cascading Style Sheets (CSS). Neste artigo, mostraremos como centralizar imagens usando CSS e a tag obsoleta. alinhar.

Passos

Método 1 de 2: CSS (recomendado)

1. 1 Adicione o código HTML para a imagem. Você usará folhas de estilo em cascata (CSS) para alinhar a imagem, mas precisará colocá-la na página usando HTML. A seguir está um exemplo de uso da tag img> para inserir uma imagem em seu código:

   img src = "cachorro.webp" alt = "esta é a foto de um cachorro">

   • Ao invés de dog.webp substitua o nome do arquivo de imagem, e após o "alt" digite a descrição da imagem. Significado Centro para "classe" não altere, porque você criará uma classe CSS com esse nome.
2. 2 Encontre o código CSS. Se o seu site tiver um arquivo CSS separado, abra-o. Caso contrário, o CSS provavelmente está na parte superior do arquivo HTML, dentro das tags cabeça>... Role até o topo do arquivo para encontrar tags estilo> / estilo>.
   • Se tags estilo> / estilo> não, adicione-os. Leia esse artigo para mais informação.
3. 3 Adicione CSS para alinhar a imagem. Em vez de "50%", você pode inserir um valor diferente para fazer a imagem aparecer na página. Você não conseguirá centralizar a imagem com um valor de "100%", então esse número deve ser diferente.

   .center {display: block; margem esquerda: automático; margem direita: automático; largura: 50%; }

4. 4 Salve suas alterações. Salve o arquivo HTML e o arquivo CSS (se houver). Isso centralizará a imagem.
   • Também dentro das tags img> pode adicionar para centralizar outras imagens.

Método 2 de 2: o atributo "align" em HTML

1. 1 Crie um novo parágrafo. Embora esse método de centralizar imagens tenha sido descontinuado, ele ainda funciona em muitos navegadores. No entanto, recomendamos o uso de CSS para manter o site funcional quando os navegadores deixarem de oferecer suporte ao atributo especificado. Lembre-se de que o atributo alinhar irá centralizar a imagem apenas dentro do elemento que a rodeia (por exemplo, dentro das tags p> / p> ou div> / div>) Por exemplo, no arquivo HTML, criaremos um novo parágrafo adicionando p> em uma linha separada.
2. 2 Adicione o código HTML para a imagem. Insira o seguinte código após a tag p>... Use este exemplo como um guia:

   p> img src = "dog.webp" alt = "imagem" align = "meio">

   • Ao invés de dog.webp substitua o nome do arquivo de imagem, e após o "alt" digite a descrição da imagem.
   • O atributo middle diz ao navegador para exibir a imagem no centro da página.
3. 3 Feche a tag de parágrafo. Para fazer isso, adicione / p> após a marca da imagem. O código finalizado deve ser semelhante a este:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

4. 4 Salve suas alterações. Isso centralizará a imagem.