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 a auto y convertirlo 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 del div.
El 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 está establecido en 100% (ancho completo).
Podemos usar la propiedad abreviada. margen y configúrelo 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.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Pruébalo ahora Producción
Ejemplo
Ahora estamos usando el margen izquierdo: automático; margen derecho: automático; y bloqueo de pantalla; propiedades para alinear la imagen al centro.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Pruébalo ahora Producción
