Como centralizar uma imagem em html

Alinhar suas imagens em uma posição apropriada em relação a outros conteúdos em suas páginas da web é altamente importante. Este alinhamento adequado define e aprimora a estrutura de um site. No HTML, existem várias maneiras de centralizar uma imagem. Essas abordagens foram discutidas aqui neste blog.

Como centralizar uma imagem usando a propriedade de alinhamento de texto

Com o objetivo de centralizar uma imagem usando a propriedade de alinhamento de texto, consulte o exemplo abaixo.

Html

No código acima, estamos fazendo um contêiner div e colocando nossa imagem dentro daquele contêiner usando a tag. Este atributo fornece um estilo em linha para a imagem. Em seguida, para centralizar a imagem, estamos usando o atributo de estilo do contêiner Div para definir a propriedade Text-Align para Center. O uso dessa propriedade na tag não terá efeito; portanto, você deve envolver a imagem dentro de um contêiner e atribuir esta propriedade a esse contêiner.

Saída

É assim que você centraliza uma imagem.

Como centralizar uma imagem usando margens

Outra maneira de atribuir à sua imagem uma posição centrada é usando propriedades de direita e margem-esquerda, como mostramos no trecho de código abaixo.

Html

A saída exibe uma imagem centrada.

Conclusão

Para centrar uma imagem em html, use o alinhamento de texto propriedade ou o Margem-direita e margem-esquerda propriedade. Ao usar a propriedade de alinhamento de texto, envolva a imagem dentro de um contêiner de div e, em seguida, usando o atributo de estilo, defina a propriedade de alinhamento de texto do contêiner para o centro, enquanto que, no caso de usar as propriedades da margem, primeiro defina a exibição da imagem como Bloqueie e depois atribua a automóvel à direita e propriedades da margem-esquerda.