Centre d'amorçage
Le framework bootstrap est un outil puissant pour concevoir des sites Web. Il offre de nombreuses classes ayant des styles prédéfinis. Plus précisément, dans Bootstrap, le texte peut être justifié en utilisant le «justifier le texte«Classe, et pour aligner les éléments à droite, à gauche et au centre:«texte à droite","texte-gauche", et "centre de texte«Les cours sont utilisés. Les éléments flexibles peuvent également être alignés à gauche, à droite ou au centre à l'aide des classes spécifiques.
Cet article vous guidera:
- Comment centrer le texte horizontalement à l'aide de bootstrap?
- Comment centrer une colonne horizontalement à l'aide de bootstrap?
- Comment centrer une image horizontalement à l'aide de bootstrap?
Comment centrer le texte horizontalement à l'aide de bootstrap?
Dans Bootstrap, le texte peut être justifié en utilisant le «texte-gauche","texte à droite", et "centre de texte" Des classes. Le "centre de texte«La classe est le plus souvent utilisée pour centrer les éléments horizontalement.
Exemple
L'exemple ci-dessous montre comment centrer le texte horizontalement à l'aide de bootstrap:
- Ajouter un "”Element et attribuez-le la classe comme«centre de texte".
- Dans cette classe, ajoutez le "»Élément pour spécifier un contenu texte.
Html
Bienvenue à Linuxhint!
On peut observer que le texte a maintenant l'alignement du centre horizontal:
Comment centrer une colonne horizontalement à l'aide de bootstrap?
La grille en bootstrap comprend des lignes et des colonnes. Le "ligne"La classe crée une ligne et le"col»Définit la colonne.
Exemple
Pour une démonstration pratique, consultez l'exemple mentionné ci-dessous:
- Ajouter un "«Element et attribuez-le une classe« ligne »,« d-flex »et« justify-content-center ».
- "d-flex"Rend la flexion de l'affichage de l'élément.
- "justifier-contenu-centre»Le centre horizontal aligne les éléments.
- "col-4«La classe est utilisée pour ajuster la colonne:
colonne centrée
Sortir
Comment centrer une image horizontalement à l'aide de bootstrap?
L'élément d'image peut être aligné au centre en utilisant le «d-flex" et "justifier-contenu-centre".
Exemple
Cet exemple centre l'image en suivant les étapes:
- Tout d'abord, ajoutez un "”Element et attribuez-le le"d-flex" et "justifier-contenu-centre" Des classes.
- À l'intérieur du conteneur créé, ajoutez un autre ""Avec la classe"carte".
- Dans le conteneur «carte», spécifiez le «corps de cartes» comme nom de classe.
- Inclure le "”Tag pour ajouter une image avec le"SRC","alt", et "largeur»Attributs pour spécifier la source de l'image ajoutée, du texte alternatif et la largeur par défaut.
Html
Sortir
C'est tout sur la façon de centrer horizontalement les éléments en bootstrap.
Conclusion
Pour centrer les éléments horizontalement, principalement le «centre de texte"La classe est utilisée. Les éléments peuvent être rendus flexibles en utilisant le «d-flex" classe. Les éléments flexibles peuvent être alignés au centre à l'aide du «justifier-contenu-centre" classe. Ce message a expliqué les méthodes pour aligner plusieurs éléments horizontalement.