Como Centralizar uma Imagem em HTML

Baixe em PDF
Coescrito por Equipe wikiHow

Baixe em PDF

O alinhamento de imagens é uma parte importante da programação de páginas da internet. Infelizmente, conforme os métodos de programação evoluem, algumas tags HTML caem em desuso e deixam de ser reconhecidos pelos navegadores. Para centralizar uma imagem em HTML, experimente os métodos abaixo. Caso eles não funcionem, pode ser uma boa ideia trocar para o Cascading Style Sheets (CSS).

Método 1
Método 1 de 2:

Alinhando no texto

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Na programação em HTML, você pode alinhar textos com “center”, mas, para imagens, é preciso usar a palavra “middle”. Como uma imagem não é um elemento em linha, ela deve ser identificada a partir da relação com os outros elementos.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Insira uma tag de parágrafo para indicar o começo de uma nova linha. Comece a tag com <p> e digite o texto.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    gif”. Em seguida, digite alt=”descrição da imagem” para inserir a descrição da imagem.
    • O código “src” informa a URL da imagem ao site.
    • Já a seção “alt” informa o título da imagem.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite align=”middle”> no fim da parte da tag referente à imagem. [1]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Depois, feche a tag com </p>. Uma tag inteira ficaria mais ou menos assim: <p>Estamos aprendendo a usar HTML. <img src=”dancingdogpicture.gif” alt=”dancing dog” align=”middle> O exemplo terminou. </p>.
    Publicidade
Método 2
Método 2 de 2:

Alinhando em uma tag de centralização

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Você pode inserir a imagem dentro do elemento centralizado, mas isso vai criar um espaço extra em volta do elemento.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Centralize o elemento logo no começo. Digite <center>.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite <img src=”cachorrodançando.gif” alt=”cachorro dançando” .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-460px-Center-an-Image-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-728px-Center-an-Image-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite height=”200”width=”200”> , ou insira os valores que você desejar. Essa é a última parte do pedaço da tag referente à imagem.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-460px-Center-an-Image-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-728px-Center-an-Image-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Uma tag inteira ficaria mais ou menos assim:
    <center><img src=”imagemdecachorrodançando.gif” alt=”cachorrodançando” height=”200” width=”200”></center>. [2]
    Publicidade

Avisos

  • Lembre-se de que tanto a tag de alinhamento quanto a de centralização podem ficar defasadas e não serem mais usadas no futuro. Embora isso não tenha uma data certa para acontecer, eventualmente, os navegadores vão parar de reconhecê-las e você terá que atualizar o site para CSS ou HTML5.
Publicidade

WikiHows Relacionados

Como
Inserir Espaços no HTML
Como
Definir a Largura e Altura de uma Imagem Usando HTML
Como
Ativar o WebGL
Como
Configurar Cores de Fundo em HTML
Como
Mudar a Cor do Texto em HTML
Como
Criar uma Wiki
Como
Centralizar Texto no HTML
Como
Alterar a Cor de um Botão em HTML
Como
Inserir Imagens Usando HTML
Como
Definir um Plano de Fundo em HTML
Como
Abrir Arquivos HTML
Como
Executar um Servidor Web em Seu Computador
Como
Instalar o XAMPP para Windows
Como
Criar um Feed RSS
Publicidade

Referências

  1. ↑ http://www.w3schools.com/tags/att_img_align.asp
  2. ↑ http://www.netmechanic.com/news/vol7/html_no10.htm

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 169 277 vezes.

Este artigo foi útil?

Publicidade