Como centrar una imagen en una web con HTML

Aunque no es necesariamente difícil, centrar imágenes en tus páginas web puede ser más complicado de lo que crees. La razón principal es que la etiqueta <img> es un elemento inline, por lo que se comporta de forma diferente a los elementos block. Algunos métodos utilizan HTML; otros, CSS, y algunos se consideran más “apropiados” que otros en el sentido de que no están obsoletos. A continuación, seleccione uno de los métodos que aparecen en la lista y siga las instrucciones.

Centrar una imagen usando el atributo style

Para la compatibilidad con HTML5, utilice un atributo style con el valor text-align:center dentro de un elemento block; como una etiqueta <p></p>.

Código HTML de ejemplo:

<p style="text-align:center;"><img src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" alt="Logo InternetCtrl"></p>

Y así es como quedaría la imagen centrada:

Centrar la imagen convirtiendo <img> en un elemento en bloque

Una forma de centrar correctamente las imágenes es definir el elemento <img> como un elemento block. Para ello, añade una regla CSS a la cabecera de tu página (mostrada en el siguiente ejemplo), o en un archivo CSS externo vinculado.

Código HTML de ejemplo

<style type="text/css">
.centrarImagen
{
 text-align:center;
 display:block;
}
</style>

Con este código, puedes aplicar la clase centrarImagen a una etiqueta <img> sin tener que anidarla en un elemento a nivel de bloque. Este método funciona para todas las imágenes que necesites centrar en tu web.

Usar la etiqueta <center> (Obsoleto)

Puedes centrar una imagen encerrando la etiqueta <img> entre las etiquetas <center></center>. Con esta acción se centrará esa imagen, y sólo esa, en la página web. Hay que tener en cuenta que este método está obsoleto en HTML5 y no siempre funcionará en todos los navegadores en el futuro. Sólo recomendamos utilizar este método si ninguna de las otras sugerencias mencionadas anteriormente funcionan cuando se trata de centrar una imagen.

Código HTML de ejemplo

<center><img src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" height="150" width="200"></center>