En la publicación de hoy te traigo una pequeña guía sobre cómo centrar una imagen en HTML en cualquier situación en la que te encuentres. Esta entrada será una guía rápida y directa al grano. ¡Comenzamos!
Antes de comenzar, recordemos cómo es el código para agregar una imagen HTML a una web:
<img src="/carpeta-imagenes/tu-imagen.jpg">Ahora que ya tienes el código necesario para agregar la imagen a tu página web, vamos a ver las diferentes formas existentes para centrar una imagen en tu web, ya sea horizontalmente, o verticalmente.
Podrás centrar una imagen en una página web tan solo añadiendo unas cuentas reglas CSS. Te muestro un par de formas a continuación.
Verás en el siguiente ejemplo que hay una clase CSS que he llamado «.centrar». En este selector de clase he agregado las propiedades margin-right: auto y margin-left: auto. Con ello logro que la imagen tenga un margen automático en el eje horizontal, es decir, hacia izquierda y derecha de la imagen. Como nota, si la propiedad hubiera sido simplemente margin: auto también hubiera funcionado, solo que en este caso, el margen sería sobre los dos ejes (horizontal y vertical), aunque en el vertical no se apreciaría por falta de «altura» en su contenedor padre.
See the Pen Untitled by Alberto (@carontestudio) on CodePen.
Gracias al uso de Flexbox podrás centrar una imagen en una web de una forma realmente sencilla. Tan solo hay que entender cómo funciona Flexbox, y conocer las propiedades CSS asociadas al mismo. Si quieres saber más acerca de esto, puedes formarte con nuestros cursos de diseño web.
A continuación te dejo el código necesario usando Flexbox. En el código verás que he eliminado la clase de la imagen, y que en este caso, he creado una clase llamada «padre». En ella, he aplicado los atributos display: flex y justify-content: center
Simplemente agregando estas clases al contenedor padre del elemento que quieras centrar, lo harás.
See the Pen Centrar imagen HTML con Flex by Alberto (@carontestudio) on CodePen.
En muchas ocasiones, puedes necesitar centrar verticalmente una imagen en tu maquetación web. El código para hacerlo es realmente sencillo. A continuación te muestro cómo puedes hacerlo.
See the Pen Centrar imagen HTML verticalmente con Flexbox by Alberto (@carontestudio) on CodePen.
En este código, verás que al <body> le he aplicado una altura definida de 500px. Posteriormente, a la div con clase «padre» le he dicho que «mida» el 100% de su contenedor padre. Por lo tanto, este <div> también medirá 500px, ya que es lo que mide su «padre», es decir, la etiqueta <body>. Por último, al <div> con clase «padre» le he agregado las propiedades display: flex y align-items: center
Existen varias formas para centrar una imagen en tu página web. Las más comunes son usando Flexbox como hemos visto anteriormente, y usando la propiedad CSS translate y transform
Vamos a usar un ejemplo similar a los vistos anteriormente, solo que en esta ocasión usaremos Flexbox. El código es el siguiente:
See the Pen Centrar imagen HTML en el centro de la pantalla con Flexbox by Alberto (@carontestudio) on CodePen.
En esta ocasión, te muestro el código que puedes utilizar para centrar una imagen usando posiciones absolutas y relativas, y las propiedades CSS Translate y Transform.
El código es el siguiente:
See the Pen Centrar imagen HTML en el centro de la pantalla con Flexbox by Alberto (@carontestudio) on CodePen.
Cómo has podido comprobar, centrar horizontal y verticalmente una imagen en código HTML es realmente sencillo. Aquí te he dejado las formas correctas de hacerlo.
Cuéntame en comentarios si te han sido de utilidad estos códigos, que espero que si 😉
¡Hasta la próxima!
En este artículo, aprenderás qué es el Lazy Loading y cómo implementarlo fácilmente en tu… Leer más
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más
Ver comentarios
Muy claros los ejemplos y alternativas. Muchas gracias. Saludos cordiales.
Gracias a ti por leernos