Centrer le contenu à l'intérieur d'une colonne dans Bootstrap 4

Question

J'ai besoin d'aide pour résoudre le problème, j'ai besoin de centrer le contenu à l'intérieur de la colonne dans bootstrap4, s'il vous plaît 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>

Answer 1

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

• text-center pour le centre display:inline éléments
• offset-* ou mx-auto peut être utilisé pour colonne centrale ( col-* )
• ou, justify-content-center sur le row à colonnes centrales ( col-* )
• mx-auto pour le centrage display:block éléments à l'intérieur d-flex

mx-auto (marges automatiques de l'axe des x) permettra de centrer display:block ou display:flex les éléments qui ont une largeur définie, (%, vw, px, etc.). Flexbox est utilisé par défaut sur les colonnes de la grille, il existe donc également diverses méthodes de centrage Flexbox.

Démonstration 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>

https://codeply.com/go/GRUfnxl3Ol

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

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

Voir aussi :
Alignement vertical du centre dans Bootstrap 4

Answer 2

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

Activez la fonction "flex" pour la colonne comme vous le souhaitez et utilisez la fonction "justify-content-center".

Answer 3

Ajouter une classe text-center à votre colonne :

<div class="col text-center">
I am centered
</div>

Answer 4

<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 au lieu de la classe mx-auto dans le cas de cette réponse .

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

Answer 5

2020 : Question similaire

Si votre contenu est un ensemble de boutons que vous voulez centrer sur une page, puis les envelopper dans un rangée et utiliser justify-content-center.

Exemple de code ci-dessous :

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>