Embora não seja necessariamente difícil, as imagens centralizadas nas suas páginas da Web podem estar mais envolvidas do que você pensa. O principal motivo é que a tag <img> é um elemento embutido, por isso se comporta de maneira diferente dos elementos no nível do bloco. Algumas abordagens usam HTML; outros usam CSS, e alguns são considerados mais "adequados" do que outros, pois não são preteridos. Para continuar, selecione um método na lista abaixo e siga as instruções.
Usando o atributo style
Para suporte no HTML5, você deve usar um atributo de estilo com o valor text-align: center dentro de um elemento no nível do bloco; como tags <p> </p>.
Exemplo de código HTML
<p style="text-align:center;"> <img src="logo.gif" alt="Logo"> </p>
Convertendo em um elemento no nível do bloco
Uma maneira de centralizar corretamente as imagens é definir o elemento <img> como um elemento no nível do bloco. Para fazer isso, adicione uma regra ao cabeçalho da sua página (mostrada no exemplo a seguir) ou um arquivo CSS externo vinculado.
Exemplo de código HTML
<style type="text/css"> .centerImage {text-align: center; display: block; } </style>
Com esse código, você pode aplicar a classe centerImage a uma marca <img> sem precisar aninhar em um elemento no nível do bloco. Este método funciona para várias imagens.
Exemplo de código de imagem centralizada
<img src="logo.gif" class="centerImage" alt="CH Logo" height="120" width="350">
Usando as tags <center>
Você pode centralizar uma imagem colocando a tag <img> nas tags <center> </center>. Essa ação centraliza, e somente isso, a imagem na página da web. Deve-se observar que esse método está obsoleto no HTML5 e nem sempre funcionará em todos os navegadores daqui para frente. Recomendamos o uso desse método apenas se nenhuma das outras sugestões mencionadas acima funcionar onde você está tentando centralizar uma imagem.
Exemplo de código HTML
<center> <img src="logo.jpg" alt="o que a imagem mostra" height="150" width="200"> </center>