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
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!
¿Te encuentras atrapado en la resolución de problemas? Desde formular la pregunta adecuada hasta aprovechar… Leer más
Como en todas las áreas del diseño, el color tiene un papel fundamental. Comprenderlo y… Leer más
Ha llegado el momento. Al fin tenemos entre nuestras manos la primera gran actualización de… Leer más
¿No has oído hablar de Zapier todavía? ¿Quizás te han hablado por encima de Zapier… Leer más
Imagina que un usuario que esté ubicado en Inglaterra encuentre tu web en la versión… Leer más
En este artículo no solo te explicaremos algunas formas para conseguir quitar una página de… Leer más