Como Centralizar uma Imagem Usando HTML e CSS

Um desenvolvedor web usa HTML (Hypertext Markup Language) para informar ao navegador o propósito funcional de cada elemento na página, como parágrafo, título ou lista. Desde o HTML 4, as CSS (Cascading Style Sheets) fornecem ao desenvolvedor uma forma de dizer ao navegador como cada elemento deve parecer, separando a definição do que eles são. Uma página pode ter estilos CSS diferentes para diferentes dispositivos, como celulares e desktops, permitindo que a aparência mude sem alterar o HTML. Use propriedades CSS para centralizar uma imagem.

Passo 1: Inserir a Tag de Imagem

Coloque a tag "img" no arquivo HTML onde deseja que a imagem apareça na página. Ela deve ficar entre as tags "body" e após as tags "h1". Por exemplo:

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

Define uma imagem chamada foto.jpg com 270 pixels de largura e 50 de altura. É o primeiro elemento na página após o título superior.

Passo 2: Usar Margem Automática

Use o atributo CSS "margin" para definir o espaço ao redor de elementos da página, como imagens. O valor "auto" para o atributo margin diz ao navegador para determinar automaticamente a quantidade de espaço. Assim, <img src="foto.jpg" alt="Descrição" width="170" height="50" style="margin:auto;" /> define que o espaço ao redor da imagem é determinado pelo navegador.

Passo 3: Definir Display como Block

Use a propriedade "display" para definir como um elemento é exibido. O valor "block" diz ao navegador para exibir o elemento em sua própria linha, com espaço acima e abaixo. Assim, <img src="foto.jpg" alt="Descrição" width="170" height="50" style="margin:auto;display:block;" /> define a mesma imagem, mas a adição de "display:block;" a coloca em sua própria linha.

Passo 4: Testar em Múltiplos Navegadores

Visualize a página web em vários navegadores diferentes para verificar se a imagem está centralizada corretamente.

Dica

Inclua a descrição da imagem dentro de uma tag "alt". Isso torna sua página mais acessível a leitores com deficiência visual e garante que seu código esteja em conformidade com os padrões. <img src="foto.jpg" alt="Descrição da imagem" />

• Como Funcionam as Caixas de Som Sem Fio
• Como Alterar Meu Endereço de Correspondência nos Correios