web-dev-qa-db-fra.com

Centrer le contenu dans une colonne dans Bootstrap 4

J'ai besoin d'aide pour résoudre le problème, je dois centrer le contenu dans la colonne dans bootstrap4, veuillez trouver mon code ci-dessous

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>
twitter-bootstrapflexboxbootstrap-4
40
Praveen Kumar

Il existe plusieurs méthodes de centrage horizontal dans Bootstrap 4 ...

  • text-center pour les éléments du centre display:inline
  • offset-* ou mx-auto peut être utilisé pour centrer la colonne (col-*)
  • ou justify-content-center sur les colonnes row à centre (col-*)
  • mx-auto pour centrer display:block éléments à l'intérieur de d-flex

mx-auto (marges de l'axe des x auto) centrera les éléments display:block ou display:flex ayant une largeur définie (%, vw, px, etc.). Flexbox est utilisé par défaut sur les colonnes de la grille. Il existe donc différentes méthodes de centrage de Flexbox.

Démo des méthodes de centrage de Bootstrap 4

Dans votre cas, utilisez mx-auto pour centrer le col-3 et text-center pour centrer son contenu.

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

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

ou, en utilisant justify-content-center sur des éléments flexbox (.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

Regarde aussi:
Alignement vertical du centre dans Bootstrap 4

101
Zim

Ajoutez la classe text-center à votre colonne:

<div class="col text-center">
I am centered
</div>
4
zhekaus
<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

J'ai utilisé justify-content-center class au lieu de mx-auto comme dans cette réponse .

vérifier à https://jsfiddle.net/sarfarazk/4fsp4ywh/

2
Sarfaraz Kasmani