Centro de arranque
El marco Bootstrap es una herramienta poderosa para diseñar sitios web. Ofrece muchas clases que tienen estilos predefinidos. Más específicamente, en Bootstrap, el texto puede justificarse utilizando el "texto-justificar"Clase, y para alinear los elementos de la derecha, izquierda y centro", ",derecho de texto","texto izquierda", y "centro de textoSe utilizan clases. Los elementos flexibles también se pueden alinear a la izquierda, a la derecha o al centro utilizando las clases específicas.
Este artículo te guiará:
- Cómo centrar el texto horizontalmente usando bootstrap?
- Cómo centrar una columna horizontalmente usando bootstrap?
- Cómo centrar una imagen horizontalmente usando bootstrap?
Cómo centrar el texto horizontalmente usando bootstrap?
En Bootstrap, el texto puede justificarse utilizando el "texto izquierda","derecho de texto", y "centro de texto"Clases. El "centro de texto"La clase se usa más comúnmente para centrar los elementos horizontalmente.
Ejemplo
El siguiente ejemplo muestra cómo centrar el texto horizontalmente usando bootstrap:
- Agrega un ""Elemento y asignarlo la clase como"centro de texto".
- Dentro de esta clase, agregue el "El elemento para especificar algún contenido de texto.
Html
Bienvenido a Linuxhint!
Se puede observar que el texto ahora tiene alineación del centro horizontal:
Cómo centrar una columna horizontalmente usando bootstrap?
La cuadrícula en bootstrap comprende filas y columnas. El "fila"La clase crea una fila y el"columna"Define la columna.
Ejemplo
Para una demostración práctica, consulte el ejemplo mencionado a continuación:
- Agrega un ""Elemento y asignarlo una clase" fila "," D-FLEX "y" Justify-Content-Center ".
- "D-FLEX"Hace que la pantalla del elemento se flexione.
- "justificar el centro de contenido"Horizontalmente Center alinea los elementos.
- "Col-4La clase se utiliza para ajustar la columna:
columna centrada
Producción
Cómo centrar una imagen horizontalmente usando bootstrap?
El elemento de imagen se puede alinear en el centro utilizando el "D-FLEX" y "justificar el centro de contenido".
Ejemplo
Este ejemplo centra la imagen siguiendo los pasos:
- Primero, agregue un ""Elemento y asignarlo el"D-FLEX" y "justificar el centro de contenido"Clases.
- Dentro del contenedor creado, agregue otro ""Con la clase"tarjeta".
- Dentro del contenedor de "tarjeta", especifique el "cuerpo de la tarjeta" como el nombre de la clase.
- Incluir la ""Etiqueta para agregar una imagen con el"SRC","alternativo", y "ancho"Atribues para especificar la fuente de la imagen agregada, el texto alternativo y el ancho predeterminado.
Html
Producción
Eso se trata de cómo centrar horizontalmente los elementos en bootstrap.
Conclusión
Para centrar los elementos horizontalmente, principalmente el "centro de textoSe usa la clase. Los elementos se pueden hacer flexibles utilizando el "D-FLEX" clase. Los artículos flexibles se pueden alinear con el centro utilizando el "justificar el centro de contenido" clase. Esta publicación ha explicado los métodos para alinear varios elementos horizontalmente.