¿Por qué no puedo centrar mi imagen?

El síntoma: La imagen se queda a la izquierda

Has intentado usar text-align: center; en la imagen o el famoso margin: 0 auto;, pero la imagen sigue pegada al borde izquierdo de la pantalla como si no le hubieras dado ninguna orden.

Este error ocurre porque las imágenes (<img>) son por defecto elementos de tipo inline (en línea). Se comportan como si fueran una letra dentro de una frase, y eso limita cómo podemos posicionarlas.

Imagen no centrada

Dos formas de solucionarlo

Para centrar una imagen, hay dos caminos principales, tocando el contenedor o actuando directamente sobre la imagen, dependen de cómo quieras organizar tu código:

  • Convertirla en bloque: Si le aplicas display: block;, la imagen deja de comportarse como texto y ya puedes usar margin: 0 auto; para centrarla.
  • Centrar al padre: Si dejas la imagen como está, debes aplicar text-align: center; al contenedor (el <div> o <section>) que la envuelve.

Arréglalo ahora

En este ejercicio, la imagen se resiste a ir al centro. Prueba a cambiar su comportamiento de visualización para que el margen automático funcione.

<style>

  .contenedor {

    width: 90%;

    border: 2px solid blue;

  }

  .imagen-rebelde {

    width: 300px;

    margin: 0 auto;

    /* La imagen no se centra porque es inline. */

    /* Solución: cambia su display aquí abajo */

    display: inline;

  }

</style>

 

<div class="contenedor">

    <h2>Galería de Arte</h2>

    <img src="imgs/estrellas.jpg" class="imagen-rebelde" alt="Obra de arte">

    <p>¿Lograste llevar el cuadro al centro de la sala?</p>

</div>

Ejemplo: Centrar imagen cambiando el tipo de display.

Truco Pro: Si usas Flexbox en el contenedor (display: flex; justify-content: center;), no importa si la imagen es inline o block, ¡se centrará automáticamente!