Centra il contenuto all’interno di una colonna in Bootstrap 4

Ho bisogno di aiuto per risolvere il problema, ho bisogno di centrare il contenuto all’interno della colonna in bootstrap4, si prega di trovare il mio codice qui sotto

Ci sono più metodi di centraggio orizzontale in Bootstrap 4

  • text-center per display:inline centrale display:inline elementi in display:inline
  • offset-* o mx-auto può essere usato per centrare la colonna ( col-* )
  • o, justify-content-center sulla colonna per centrare le colonne ( col-* )
  • mx-auto per la display:block centrata display:block elementi di display:block all’interno di d-flex

mx-auto (margini dell’asse x automatico) centrerà il display:block o display:flex elementi display:flex che hanno una larghezza definita, (%, vw, px, ecc.). Flexbox è usato di default sulle colonne della griglia, quindi ci sono anche vari metodi di centraggio del flexbox.

Dimostrazione dei metodi di centraggio Bootstrap 4

Nel tuo caso, usa mx-auto per centrare il col-3 e text-center per centrare il suo contenuto ..

 
center

http://www.codeply.com/go/GRUfnxl3Ol

oppure, usando justify-content-center sugli elementi di .row ( .row ):

 
center

Vedi anche:
Vertical Align Center in Bootstrap 4

Aggiungi class text-center alla tua colonna:

 
I am centered
 
Center text goes here

Ho usato la class justify-content-center invece di mx-auto come in questa risposta .

controlla su https://jsfiddle.net/sarfarazk/4fsp4ywh/

Aggiungi qualsiasi class di offset, da offset-1 a offset-11, che diventa sempre centrale.

  
Text here2 span text

per favore controlla il violino usando Bootstrap 4. Nel violino ho usato “offset-5”, quindi ha posizionato il centro.