Muchos desarrolladores luchan al trabajar con imágenes. Manejar la capacidad de respuesta y la alineación es particularmente difícil, especialmente al centrar una imagen en el medio de la página.
Entonces, en esta publicación, mostraré algunas de las formas más comunes de centrar una imagen tanto vertical como horizontalmente usando diferentes propiedades CSS.
Revisé las propiedades de Posición y Visualización de CSS en mi publicación anterior. Si no está familiarizado con esas propiedades, le recomiendo que consulte esas publicaciones antes de leer este artículo.
Aquí hay una versión en video si quieres verla:
Centrado de una imagen horizontalmente
Comencemos por centrar una imagen horizontalmente usando 3 propiedades CSS diferentes.
Texto alineado
La primera forma de centrar una imagen horizontalmente es utilizando la text-alignpropiedad. Sin embargo, este método solo funciona si la imagen está dentro de un contenedor a nivel de bloque como :
div { text-align: center; } Margen: Automático
Otra forma de centrar una imagen es usando la margin: autopropiedad (para margen izquierdo y margen derecho).
Sin embargo, usar margin: autosolo no funcionará para imágenes. Si necesita usar margin: auto, hay 2 propiedades adicionales que debe usar también.
La propiedad margin-auto no tiene ningún efecto sobre los elementos de nivel en línea. Dado que la
img { margin: auto; display: block; }En segundo lugar, también necesitamos definir un ancho. Entonces, los márgenes izquierdo y derecho pueden tomar el resto del espacio vacío y auto alinearse, lo que hace el truco (a menos que le demos un ancho del 100%):
img { width: 60%; margin: auto; display: block; }Pantalla: Flex
La tercera forma de centrar una imagen horizontalmente es usando display: flex. Al igual que usamos la text-alignpropiedad para un contenedor, también usamos display: flexpara un contenedor.
Sin embargo, usar display: flexsolo no será suficiente. El contenedor también debe tener una propiedad adicional llamada justify-content:
div { display: flex; justify-content: center; } img { width: 60%; }La justify-contentpropiedad funciona junto con display: flex, que podemos utilizar para centrar la imagen horizontalmente.
Finalmente, el ancho de la imagen debe ser menor que el ancho del contenedor, de lo contrario, ocupa el 100% del espacio y luego no podemos centrarlo.
Importante: la display: flexpropiedad no es compatible con versiones anteriores de navegadores. Consulte aquí para obtener más detalles.
Centrar una imagen verticalmente
Pantalla: Flex
Para la alineación vertical, el uso display: flexvuelve a ser realmente útil.
Considere un caso en el que nuestro contenedor tiene una altura de 800 px, pero la altura de la imagen es de solo 500 px:
div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }Ahora, en este caso, agregar una sola línea de código al contenedor align-items: center, hace el truco:
div { display: flex; justify-content: center; align-items: center; height: 800px; }La align-itemspropiedad puede colocar elementos verticalmente si se usa junto con display: flex.
Posición: Propiedades absolutas y de transformación
Otro método para la alineación vertical es usar las propiedades positiony transformjuntas. Este es un poco complicado, así que hagámoslo paso a paso.
Paso 1: Definir posición absoluta
En primer lugar, cambiamos el comportamiento de posicionamiento de la imagen de statica absolute:
div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }Además, debe estar dentro de un contenedor relativamente posicionado, por lo que agregamos position: relativea su contenedor div.
Paso 2: Defina las propiedades superior e izquierda
En segundo lugar, definimos las propiedades superior e izquierda de la imagen y las configuramos al 50%. Esto moverá el punto de inicio (arriba a la izquierda) de la imagen al centro del contenedor:
img { width: 80%; position: absolute; top: 50%; left: 50%; }Paso 3: definir la propiedad de transformación
Pero el segundo paso ha movido la imagen parcialmente fuera de su contenedor. Entonces tenemos que traerlo de vuelta al interior.
Definir una transformpropiedad y agregar -50% a sus ejes X e Y hace el truco:
img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Hay otras formas de centrar las cosas horizontal y verticalmente, pero he explicado las más comunes. Espero que esta publicación te haya ayudado a comprender cómo alinear tus imágenes en el centro de la página.
Si desea obtener más información sobre el desarrollo web, no dude en visitar mi canal de Youtube para obtener más información.
¡Gracias por leer!