Como centralizar uma imagem usando programação HTML

Escrito por nichelle coleman | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como centralizar uma imagem usando programação HTML
Use CSS para especificar a aparência da página web (Photo courtesy of Expert Village)

Um codificador de páginas web usa Linguagem de Marcação de Hipertexto (HTML, Hypertext Markup Language) para informar ao navegador da finalidade funcional de cada elemento em uma página, como um parágrafo, título ou lista. Desde HTML 4, folhas de estilo CSS têm fornecido ao codificador uma maneira de dizer ao navegador como cada um desses elementos deve se ver, além de definir o que são. Uma página pode ter diferentes estilos CSS para diferentes tipos de dispositivos, como telefones celulares e computadores de mesa, permitindo que a aparência da página seja alterada sem a necessidade de que o codificador mude o código HTML. Use as propriedades CSS para centralizar uma imagem.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Coloque a tag "img" no arquivo HTML onde deseja que a imagem seja exibida na página web. Ela deve estar entre os tags "body" e após os tags "h1". Por exemplo,

    <body>

    <h1 style="text-align:center;">Este é o seu texto.</ h1> <img src="foto.jpg" alt="A descrição da imagem" width="270" height="50" />

    </ body>

    define uma imagem com o nome foto.jpg que é de 170 pixels de largura e 50 pixels de altura. É a primeira coisa na página após o título superior.

  2. 2

    Use o atributo CSS "margin" para definir o espaço em torno de elementos da página, como fotos. O valor "auto" para o atributo "margin" informa ao navegador que deve determinar automaticamente a quantidade de espaço. Assim, <img src="photo.jpg" alt="Uma descrição da imagem" width="170" height="50" /> style="margin:auto;" define que o espaço em torno da imagem é determinado pelo navegador.

  3. 3

    Use a propriedade "display" para definir como um elemento de página é exibido. O valor "block" para a propriedade "display" informa ao navegador que deve exibir o elemento em sua própria linha, com espaços acima e abaixo dele. Então, <img src="photo.jpg" alt="Uma descrição da imagem" width="170" height="50" /> style="margin:auto;display:block;" define a mesma imagem, mas a adição de "display:block;" agora a coloca em sua própria linha.

  4. 4

    Veja a página web em vários navegadores diferentes para se certificar que a imagem esteja centrada corretamente.

Dicas & Advertências

  • Inclua a descrição da imagem dentro de um tag "alt". Isso faz com que sua página seja mais acessível à leitores com deficiência visual e garante que seu código seja compatível com as normas.

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