Saltar al contenido

Cómo centrar imágenes en CSS

septiembre 22, 2021

CSS nos ayuda a controlar la visualización de imágenes en aplicaciones web. El centrado de imágenes o textos es una tarea común en CSS. Para centrar una imagen, tenemos que establecer el valor de margen izquierdo y margen derecho para auto y conviértalo en un elemento de bloque usando el bloqueo de pantalla; propiedad.

Si la imagen está en el elemento div, entonces podemos usar el alineación de texto: centro; propiedad para alinear la imagen al centro en el div.

Se dice que el elemento es un elemento en línea que se puede centrar fácilmente aplicando el alineación de texto: centro; propiedad de CSS al elemento padre que lo contiene.

Nota: La imagen no se puede centrar si el ancho se establece en 100% (ancho completo).

Podemos usar la propiedad taquigráfica margen y ponerlo en auto para alinear la imagen en el centro, en lugar de utilizar el margen izquierdo y margen derecho propiedad.

Veamos cómo centrar una imagen aplicando alineación de texto: centro; propiedad a su elemento padre.

Ejemplo

En este ejemplo, estamos alineando las imágenes usando el alineación de texto: centro; propiedad. La imagen está en el elemento div.

html>

Pruébelo ahora

Producción

Cómo centrar imágenes en CSS

Ejemplo

Ahora, estamos usando el margen izquierdo: automático; margen derecho: automático; y bloqueo de pantalla; propiedades para alinear la imagen al centro.

Pruébelo ahora

Producción

Cómo centrar imágenes en CSS


close