En este artículo de consejos+trucos, explicamos las formas más comunes de centrar una imagen tanto vertical como horizontalmente utilizando diferentes propiedades CSS. A continuación puede leer todo lo que necesita saber.
- Cómo centrar una imagen horizontalmente
- Cómo centrar una imagen verticalmente
Cómo centrar una imagen horizontalmente en CSS
Hemos reunido tres formas para que puedas centrar la imagen en tu página web utilizando CSS:
- Margen: Auto
- Alineación del texto
- Pantalla: Flex
Margen: Auto
La primera forma de alinear una imagen horizontalmente es utilizar margin: auto. Esto establece las propiedades de margen izquierdo y margen derecho en automático y ayuda a centrar. Sin embargo, esto no funciona automáticamente para las imágenes, ya que se trata de un elemento en línea. Sin embargo, con la ayuda del comando display:block en el código CSS, las imágenes pueden convertirse fácilmente en elementos de bloque. Después, la alineación automática también funciona.
Por otra parte, también debe definir un ancho para la imagen - que, en consecuencia, no es del 100%- para que la imagen pueda alinearse automáticamente en base a los márgenes izquierdo y derecho.