Header Ads Widget

Ticker

6/recent/ticker-posts

Centrado de imágenes horizontal y verticalmente en CSS con Flexbox

 En este artículo, veremos cómo centrar imágenes en CSS tanto vertical como horizontalmente con Flexbox.

Veremos cómo centrar imágenes dentro de contenedores flex div y luego cómo ajustar eso a toda la página HTML usando unidades de ventana gráfica.

Centrar las cosas en CSS, especialmente el centrado vertical, ha sido intimidante para muchos desarrolladores, ya que necesitábamos usar varios trucos y trucos para centrar elementos, incluidos texto e imágenes.

Gracias a Flexbox, el centrado de CSS se vuelve más fácil que antes y más sencillo.

En este artículo, le mostraremos cómo centrar imágenes en CSS por ejemplo usando Flexbox.

Centrado CSS horizontal

Veamos cómo centrar horizontalmente un div con una imagen. Simplemente necesitamos usar la justify-contentpropiedad y establecer el valor en centeren el contenedor flexible.

Este es un ejemplo de código HTML con un divelemento que contiene una imagen:

<div class="image-container">
    <img src="image.png" width="100">
</div>

Para centrar la imagen dentro del contenedor div, simplemente necesitamos hacer que el contenedor sea una caja flexible y usar justify-contentcon el centervalor:

.image-container {
  display: flex;
  justify-content: center;
}

Eso es todo, hemos visto cómo centrar horizontalmente una imagen en CSS usando Flex box sin recurrir a viejos trucos que pueden resultar intimidantes, especialmente para los nuevos diseñadores y desarrolladores de CSS.

Centrado CSS vertical

Lo que realmente es más difícil es el centrado vertical, pero gracias a Flexbox, centrar los elementos verticalmente es mucho más fácil.

Tomando el mismo ejemplo HTML con una imagen dentro de un contenedor div:

<div class="image-container">
    <img src="image.png" width="100">
</div>

Este es el código CSS para centrar la imagen dentro del div verticalmente:

.image-container {
  display: flex;
  //justify-content: center;
  align-items: center;
}

Simplemente usamos la align-itemspropiedad con el centervalor para centrar la imagen verticalmente dentro del div contenedor que debería ser un cuadro flexible.

También puede aplicar la align-selfpropiedad con el valor de centeren el propio elemento de la imagen para centrarlo verticalmente dentro de un contenedor flexible. Esto es más útil si tiene varios elementos y desea centrar uno específico:

.image-container  img {
  align-self: center;
}

Hemos visto cómo centrar imágenes horizontal y verticalmente dentro de un div contenedor, pero ¿qué pasa si necesita centrarlo en la página HTML completa?

Dado que Flexbox necesita saber la altura del contenedor para alinear elementos, simplemente necesitamos establecer la altura del div como la altura de la página, lo que se puede lograr usando unidades de ventana gráfica donde 100vhes igual al 100% de la altura de la ventana gráfica.

body {
  margin: 0;
}
.image-container {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

Conclusión

A lo largo de este artículo, hemos visto cómo centrar imágenes dentro de un div contenedor, horizontal y verticalmente, usando las propiedades de Flexbox como justify-contentalign-itemsy estableciendo sus valores en centerTambién hemos visto cómo centrar la imagen por ejemplo en la página completa simplemente haciendo que la altura del div sea la altura de la página usando unidades de ventana gráfica donde 100vhes igual al 100% de la altura de la ventana gráfica.

Publicar un comentario

0 Comentarios