COMO CENTRAR UNA IMAGEN EN LA PAGINA

                                         COMO CENTRAR UNA IMAGEN EN UNA PAGINA

 Teniendo como ejemplo el ejercicio anterior, proceda a seguir la secuencia, y debajo de donde colocó el titulo centrado, proceda según Nuestro Punto de Partida (El HTML):

Tenemos esta estructura;

<div class="imagen-contenedor">

    <!-- La imagen que quieres centrar -->

    <img src="https://edutechsiglo21.com/2025/imgs/jovencita.jpg" alt="imagen digital" width="200" height="200">

</div>

 

• div.imagen-contenedor: De nuevo, una caja invisible. Su trabajo es "contener" a la imagen. Nuestra meta es centrar esta caja completa en medio de la página (horizontalmente).
• <img>: La imagen en sí misma, que está dentro de la caja. Ya tiene un ancho (width="200") y alto (height="200") definidos en el HTML.

 

El Objetivo:

Queremos que la caja div.imagen-contenedor (y por lo tanto, la imagen que contiene) se sitúe justo en el centro horizontal de la pantalla (en pantallas grandes).

 

La Herramienta: CSS

Usaremos nuestro archivo estilos.css para darle las instrucciones.

 

¡Vamos al Grano! Paso a Paso:

 

Paso 1: Seleccionar la Caja Contenedora en CSS

Igual que antes, necesitamos decirle al CSS a qué elemento nos referimos. Usamos su clase:

.imagen-contenedor {

    /* Instrucciones para la caja de la imagen aquí */

}

 

Paso 2: ¡Requisito Clave! Definir un Ancho (width)

Aquí viene un punto muy importante: para que el navegador pueda centrar horizontalmente un elemento de bloque (como un div) usando márgenes automáticos (lo veremos en el siguiente paso), ¡ese elemento debe tener un ancho definido!

El navegador necesita saber cuánto mide el objeto para calcular cuánto espacio sobra a cada lado y distribuirlo por igual.

Como nuestra imagen mide 200px de ancho, parece lógico que nuestra caja contenedora también mida 200px de ancho.

Añadimos la propiedad width:

.imagen-contenedor {

    width: 200px; /* ¡Fundamental! Le damos el mismo ancho que la imagen */

}

 

Paso 3: ¡La Magia para Centrar el Bloque! Márgenes Automáticos (margin: auto)

Esta es la técnica estándar y más común para centrar elementos de bloque horizontalmente. Usamos la propiedad margin.

Podemos hacerlo de dos formas:

• Forma Larga:
• .imagen-contenedor {
•     width: 200px;
•     margin-left: auto;  /* Margen izquierdo automático */
•     margin-right: auto; /* Margen derecho automático */

}

 

Al poner auto en los márgenes izquierdo y derecho, le decimos al navegador: "Calcula tú mismo el espacio que sobra a la izquierda y a la derecha, y repártelo por igual". ¡Esto centra la caja!

• Forma Corta (¡Más común!):
• .imagen-contenedor {
•     width: 200px;
•     margin: 0 auto; /* Forma abreviada y preferida */

}

• margin: 0 auto; es un atajo.
• El primer valor (0) se aplica al margen superior e inferior (en este caso, no le ponemos margen arriba ni abajo).
• El segundo valor (auto) se aplica al margen izquierdo y derecho. ¡Logra el mismo efecto de centrado!

 

Paso 4: (Buena Práctica) Asegurar que la Imagen se Centre Dentro del Contenedor

Aunque en este caso nuestra caja (div) mide exactamente lo mismo que la imagen (200px), por lo que la imagen ya llena la caja, es una buena práctica usar también text-align: center; en el contenedor.

¿Por qué?

1. Si en el futuro la caja fuera más ancha que la imagen, text-align: center; se encargaría de centrar la imagen dentro de esa caja más grande.
2. Refuerza el concepto: margin: auto centra el bloque, text-align: center centra el contenido inline dentro del bloque.

Añadimos text-align: center;:

.imagen-contenedor {

    width: 200px;

    margin: 0 auto;      /* Centra la CAJA (el div) en la página */

    text-align: center;  /* Centra el CONTENIDO (la img) DENTRO de la caja */

}

 

Paso 5: (Opcional) Añadir Espacio Debajo

Para que la imagen no quede pegada a lo que venga después (como el pie de página), podemos añadir un margen inferior:

.imagen-contenedor {

    width: 200px;

    margin: 0 auto 30px auto; /* Forma corta: Arriba 0, Derecha Auto, Abajo 30px, Izquierda Auto */

    /* O más claro: */

    /* margin: 0 auto; */

    /* margin-bottom: 30px; */ /* Añade espacio debajo */

 

    text-align: center;

}

 

He mostrado dos formas de añadir el margen inferior junto con el centrado. La segunda (margin-bottom: 30px;) suele ser más clara para empezar.

¡Resultado Final en CSS!

La regla completa y recomendada en estilos.css sería:

/* --- Estilos para el Contenedor de la Imagen --- */

.imagen-contenedor {

  width: 200px;         /* 1. Definir un ancho es crucial */

 

  /* 2. Centrar el PROPIO DIV en la página */

  margin-left: auto;

  margin-right: auto;

  /* Forma corta equivalente: margin: 0 auto; */

 

  /* 3. Centrar la IMAGEN (contenido inline) DENTRO del div */

  text-align: center;

 

  /* 4. (Opcional) Espacio debajo para separar del footer */

  margin-bottom: 30px;

}