¿Cómo centrar una imagen en HTML y CSS?

07/04/2023

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Centrar una imagen en HTML y CSS es una tarea bastante sencilla. A continuación, te explicaré cómo hacerlo paso a paso.

Índice
  1. Establecer la imagen
  2. Centrar la imagen

Establecer la imagen

En primer lugar, necesitas tener una imagen en tu código HTML. Puedes hacerlo de dos formas:

a) Utilizando la etiqueta <img>, que es una etiqueta de imagen auto-cerrada. Por ejemplo:

<img src="ruta_de_tu_imagen.jpg" alt="Descripción_de_tu_imagen">

b) Utilizando CSS para establecer la imagen como fondo de un elemento HTML. Por ejemplo:

<div class="contenedor"></div>
.contenedor {
  background-image: url("ruta_de_tu_imagen.jpg");
  height: 500px; /* ajusta la altura del contenedor según tu necesidad */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Centrar la imagen

Para centrar la imagen, necesitas aplicar algunos estilos CSS. Puedes hacerlo de varias maneras, aquí te muestro dos opciones:

a) Utilizando la propiedad "margin". Por ejemplo:

img {
  display: block; /* esto para evitar que se agregue un margen lateral */
  margin: 0 auto; /* esto centra la imagen horizontalmente */
}

b) Utilizando la propiedad "text-align" en un contenedor que contenga la imagen. Por ejemplo:

<div class="contenedor">
  <img src="ruta_de_tu_imagen.jpg" alt="Descripción_de_tu_imagen">
</div>
.contenedor {
  text-align: center; /* esto centra el contenido del contenedor horizontalmente */
}

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir