¿Cómo puedo centrar una imagen horizontalmente en bootstrap??

Al desarrollar cualquier aplicación, las imágenes juegan un papel vital en la mejora de su representación visual. Sin embargo, estas imágenes deben tener un diseño y alineación adecuados. Para alinear las imágenes, el "img-fluido","flotador izquierdo", y "flotar derecho"Las clases se pueden usar. Más específicamente, para alinear la imagen, el "centro de texto" y el "MX-AUTO D-BLOCKSe utilizan clases.

Este artículo explicará cómo centrar una imagen horizontalmente en bootstrap.

Prerrequisito: Agregue una imagen

En HTML, agregue una imagen utilizando el ""Etiqueta siguiendo las instrucciones dadas:

• > Agregar un "" elemento.
• Dentro de esta etiqueta "", agregue una imagen utilizando el "" Elemento con los atributos "SRC", "Ancho" y "Alt".
• El "SRC"Establece la ruta de la imagen.
• El "ancho"Ajusta el tamaño de la imagen.
• El "alternativo"Especifica el texto alternativo en caso de que la imagen no pueda cargarse.

Html

Producción

Cómo centrar una imagen horizontalmente en bootstrap utilizando la clase "Center de texto"?

El bootstrap "centro de textoEl centro de clases alinea las imágenes. Esta clase tiene un CSS predefinido "texto alineado"Propiedad con el valor"centro"Eso ayuda a establecer la alineación central de una imagen horizontalmente.

Ejemplo

Asignar el "centro de texto"Clase para el padre""Elemento como se muestra aquí:

Producción

Cómo centrar una imagen horizontalmente en bootstrap utilizando la clase "MX-AUTO D-BLOCK"?

El "MX-Auto"En combinación con el"D-BLOCK"Clase, alinea la imagen en el centro. El "Mx-Auto" es el CSS "margen"Propiedad con el valor"auto", Y la propiedad" D-Bloque "es la CSS"mostrar"Propiedad con el valor"bloquear".

Ejemplo

Implementemos las clases "MX-Auto" y "D-Bloque" al elemento "" y veamos el efecto:

Producción

De esta manera, puede centrar una imagen horizontalmente en bootstrap.

Conclusión

Para centrar una imagen horizontalmente en Bootstrap, primero, cree un archivo HTML y agregue una imagen usando el "" etiqueta. Asigne los atributos requeridos, como "SRC","alternativo","ancho" y más. Añade el "centro de texto"Clase al elemento principal de la imagen para ajustar la alineación central de la imagen. El "MX-Auto"Clase, en combinación con el"D-BLOCK"La clase también se puede usar para este propósito. Este artículo ha explicado cómo centrar una imagen horizontalmente usando bootstrap.