Como centralizar uma imagem usando programação HTML

...

Use CSS para especificar a aparência da página da web.

Um codificador de página da Web usa a linguagem de marcação de hipertexto para informar ao navegador da Web a finalidade funcional de cada elemento em uma página, como um parágrafo, título ou lista. Desde o HTML 4, as folhas de estilo em cascata fornecem ao codificador uma maneira de dizer ao navegador como cada um desses elementos deve ser, separado da definição de quais são. Uma página pode ter diferentes estilos CSS para diferentes tipos de dispositivos, como telefones celulares e computadores desktop, permitindo que a aparência da página mude sem que o codificador precise alterar o HTML. Use propriedades CSS para centralizar uma imagem.

Passo 1

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

Vídeo do dia

Este é o seu texto.

Uma descrição da imagem

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

Passo 2

Use o atributo CSS "margin" para definir o espaço ao redor dos elementos da página, como imagens. O valor "auto" para o atributo margin informa ao navegador da Web para determinar automaticamente a quantidade de espaço. Então, Uma descrição da imagem define que o espaço ao redor da imagem é determinado pelo navegador.

etapa 3

Use a propriedade "display" para definir como um elemento da página é exibido. O valor "block" da propriedade display informa ao navegador da Web para exibir o elemento em sua própria linha, com espaço acima e abaixo dele. Então, Uma descrição da imagem define a mesma imagem, mas a adição de "display: block;" agora o coloca em sua própria linha.

Passo 4

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

Gorjeta

Inclua a descrição da imagem em uma tag "alt". Isso torna sua página mais acessível para leitores com deficiência visual e garante que seu código seja compatível com os padrões. Uma descrição da imagem