Como Centralizar uma Imagem em HTML

PDF download Baixe em PDF
Coescrito por Equipe wikiHow

PDF download 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

PDF download 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

PDF download 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
Criar uma Wiki
Como
Mudar a Cor do Texto em HTML
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
Instalar o XAMPP para Windows
Como
Criar um Feed RSS
Como
Colocar Vídeo em uma Página na Internet
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 175 117 vezes.

Este artigo foi útil?

Publicidade