- ¿Cómo centrar una imagen en Div horizontalmente?
- Propiedad de margen
- Módulo Flexbox
- Diseño de vista de cuadrícula
- Atributo de posición
¿Cómo centrar una imagen en Div horizontalmente?
El desarrollador puede utilizar la propiedad de margen, el módulo Flexbox, el diseño de vista de cuadrícula y el atributo de posición para centrar una imagen en el div horizontalmente. Siga la guía a continuación para centrar la imagen horizontalmente en la etiqueta div.
Supongamos que hay un div en el que la imagen se coloca de esta manera en el archivo HTML:
< división clase = 'raíz' >
< imagen origen = '../book.jpg' altura = '50%' ancho = '50%' clase = 'imagen' >
< / división >
La imagen obtiene un ancho y una altura del 50% y una clase de 'imagen'.
Uso de la propiedad de margen
Los usuarios pueden agregar espacio alrededor de los elementos HTML utilizando la propiedad de margen. Asigna un margen según el espacio disponible después de cambiar el tamaño de la pantalla de la ventana. Por ejemplo, establece el margen izquierdo y derecho en automático, y la propiedad de visualización se establece en bloque:
imagen {
bloqueo de pantalla;
margen izquierdo: automático;
margen derecho: automático;
}
Después de ejecutar el ejemplo anterior, la página web se ve así:
La salida anterior ha mostrado que la imagen ahora está en el centro.
Uso del módulo Flexbox
El ' caja flexible ” es un módulo que contiene un conjunto completo de propiedades. En nuestro caso, seleccione la clase del elemento raíz y use flex como valor de la propiedad de visualización. Establezca el centro como un valor para “ justificar-contenido ' y ' alinear elementos ' propiedades:
.raíz {pantalla: flexible;
justificar- contenido : centro;
alinear elementos: centro;
fondo- color : azul;
}
La página web se ve así, después de ejecutar el código:
El resultado anterior muestra que la imagen se muestra en el centro del div con un color de fondo establecido en 'azul'.
Uso del módulo de diseño de vista de cuadrícula
El diseño de la vista de cuadrícula tiene 12 columnas, y el ancho total se establece en 100% y coloca cada elemento en una posición específica en la página web:
.raíz {pantalla: cuadrícula;
elementos de lugar: centro;
}
En el fragmento de código anterior, el valor de 'cuadrícula' se asigna a la propiedad de visualización. Mientras que 'place-item' se usa como abreviatura de las propiedades 'justify-content' y 'align-items':
La salida autentica que la imagen está en el centro del div usando el método de cuadrícula:
Uso del atributo de posición
Al establecer la posición de la clase raíz en un valor relativo y la clase de imagen en un valor absoluto. La imagen se puede mostrar en el centro del div:
.raíz {posición: relativa;
}
.imagen {
ancho : 700 píxeles;
altura : 500 píxeles;
posición: absoluta;
izquierda: 50 %;
transformar: traducirX ( - 50 % ) ;
}
La imagen se mueve a la izquierda de '50%' y luego se transforma nuevamente a '-50%' en el eje X. Muestra la imagen en el centro del div horizontalmente:
Así es como la imagen se puede centrar en el div horizontalmente.
Conclusión
Para configurar horizontalmente la imagen en un elemento div, use el ' margen ”, “ módulo flexible ”, “ diseño de cuadrícula ' y ' posición ' propiedades. El ' margen La propiedad de izquierda y derecha está configurada en automático. El 'módulo flexible' y el 'diseño de cuadrícula' configuran la pantalla en flex y cuadrícula respectivamente y usan el ' colocar elemento “ propiedad para centrar la imagen. La propiedad de posición establece el valor relativo a la clase raíz y absoluto a la clase de imagen y utiliza las propiedades 'izquierda' y 'transformar'. Este blog ha demostrado con éxito cómo centrar imágenes en un div horizontalmente.