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.

Centrar una imagen usando la propiedad flex (recomendado)

Aquí tienes una alternativa para centrar una imagen horizontalmente sin necesidad de realizar complicados cálculos de márgenes. Sigue estos pasos:

1. Envuelve la imagen dentro de un elemento div.
2. Configura la propiedad de visualización en flex, indicando al navegador que el div es el contenedor principal y la imagen es un elemento flexible.
3. Ajusta la propiedad de justificación del contenido a center.
4. Define el ancho de la imagen con un valor de longitud fija.

Aquí está el código CSS con el resultado:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 300px; /* Ajusta el valor según tus necesidades */
}

Un aspecto clave a tener en cuenta es asignar un selector de ID específico al div y emplear ese selector en el código CSS. Esta práctica asegura que solo el

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

div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh; /* Ajusta el valor según tus necesidades y preferencias */
}

img {
  width: 300px; /* Ajusta el valor según tus necesidades */
  height: auto; /* Ajusta según las proporciones de la imagen */
}