tutorial centrar imagen con html y css facilmente

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:

Logo InternetCtrl

La colocación del código anterior en un div puede afectar a la forma en que aparece en una pantalla. Por ejemplo, si se añade el código a un div con margen derecho, cambia la ubicación de la imagen centrada.
Consejo de InternetCtrl
Añadir un estilo inline como se ha mostrado arriba sólo debería hacerse una vez en la página web. Si necesita centrar varias imágenes, lea y ponga en practica la siguiente sugerencia y cree una clase CSS para ayudar a reducir el código redundante y hacer más rápida su página web.

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.
Recomendamos hoy:
Cómo centrar una tabla en HTML?

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

identificado se vea afectado por estas reglas, evitando cualquier impacto inadvertido en otros elementos
en el sitio. Este enfoque proporciona un control preciso y garantiza que la centralización horizontal se aplique de manera selectiva al elemento designado.

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>

Cómo centrar verticalmente una imagen en nuestra página web

La tarea de centrar verticalmente cualquier elemento puede resultar más desafiante que hacerlo horizontalmente, pero aún así es completamente alcanzable.

Centrar verticalmente una imagen usando la propiedad flex

Para lograr el centrado horizontal y vertical de una imagen mediante flexbox, sigue estos pasos:

  1. Envuelve la imagen con un elemento de bloque, como un div.
  2. Convierte este div en un contenedor flexible mediante la propiedad de visualización establecida en flex.
  3. Ajusta las propiedades de alineación de elementos y justificación de contenido a “center”. Esto instruirá al navegador a centrar tanto vertical como horizontalmente el elemento flexible, es decir, la imagen dentro del div.
  4. Especifica la altura del contenedor div con un valor proporcional.

Aquí te presento el código CSS con el resultado:

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 */
}

Esperamos que siguiendo este tutorial hayas aprendido a centrar una imagen con HTML tanto de forma horizontal como de forma vertical.

Si tienes algún comentario o pregunta, por favor deja un comentario abajo y te responderemos lo antes posible.
4.8/5 - (6 votos)
¿Alguna duda? Deja un comentario