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.
Índice de contenidos
Centrar una imagen en HTML horizontal
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.
Usando un margen horizontal automático
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.
Usando HTML con Flex
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.
Centrar una imagen en HTML verticalmente
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.
Mediante FlexBox
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
Centrar una imagen HTML en el centro de la pantalla
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
Centrar imagen HTML con Flexbox en el centro de la pantalla
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.
Centrar imagen HTML en centro de la pantalla con propiedad CSS «Transform» y «Translate»
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.
Conclusión
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!
