Centro Bootstrap
Il framework Bootstrap è uno strumento potente per la progettazione di siti Web. Offre molte classi con stili predefiniti. Più specificamente, in bootstrap, il testo può essere giustificato usando "giustificare il testo"Classe e per allineare gli elementi a destra, a sinistra e al centro,"testo-destra","testo-sinistra", E "centro di testo"Le lezioni sono utilizzate. Gli articoli flessibili possono anche essere allineati a sinistra, a destra o al centro utilizzando le classi specifiche.
Questo articolo ti guiderà:
- Come centrarti il testo in orizzontale usando bootstrap?
- Come centrarti una colonna in orizzontale usando bootstrap?
- Come centrarti un'immagine in orizzontale usando bootstrap?
Come centrarti il testo in orizzontale usando bootstrap?
In bootstrap, il testo può essere giustificato usando il "testo-sinistra","testo-destra", E "centro di testo" classi. IL "centro di testo"La classe è più comunemente usata per centrare gli elementi orizzontalmente.
Esempio
L'esempio seguente mostra come centrare il testo in orizzontale usando bootstrap:
- Aggiungere un ""Elemento e assegnarlo la classe come"centro di testo".
- All'interno di questa classe, aggiungi il ""Elemento per specificare alcuni contenuti di testo.
Html
Benvenuti in Linuxhint!
Si può osservare che il testo ora ha un allineamento centrale orizzontale:
Come centrarti una colonna in orizzontale usando bootstrap?
La griglia in bootstrap comprende righe e colonne. IL "riga"La classe crea una riga e il"col"Definisce la colonna.
Esempio
Per una dimostrazione pratica, dai un'occhiata all'esempio di seguito:
- Aggiungere un ""Elemento e assegnarlo una classe" riga "," d-flex "e" giustificare il cent-center ".
- "d-flex"Rende flessibile il display dell'elemento.
- "Justify-Content-Center"Centro orizzontalmente allinea gli elementi.
- "Col-4"La classe viene utilizzata per regolare la colonna:
colonna centrata
Produzione
Come centrarti un'immagine in orizzontale usando bootstrap?
L'elemento immagine può essere allineato al centro usando il "d-flex" E "Justify-Content-Center".
Esempio
Questo esempio centra l'immagine seguendo i passaggi:
- Innanzitutto, aggiungi un ""Elemento e assegnarlo il"d-flex" E "Justify-Content-Center" classi.
- All'interno del contenitore creato, aggiungi un altro ""Con la classe"carta".
- All'interno del contenitore "Card", specificare il "corpo della scheda" come nome di classe.
- Includere il ""Tag per aggiungere un'immagine con il"src","Al", E "larghezza"Attributi per specificare la fonte dell'immagine aggiunta, il testo alternativo e la larghezza predefinita.
Html
Produzione
Questo è tutto su come centrare orizzontalmente gli elementi in bootstrap.
Conclusione
Per centrare gli elementi orizzontalmente, principalmente il "centro di testo"La classe viene utilizzata. Gli elementi possono essere resi flessibili usando il "d-flex" classe. Gli articoli flessibili possono essere allineati al centro utilizzando il “Justify-Content-Center" classe. Questo post ha spiegato i metodi per allineare diversi elementi orizzontalmente.