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

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>
  • Utiliser pouvez utiliser class="text-center".
  • J'ai essayé de l'utiliser mais il n'est pas de travail pour Bootstrap4, le texte seul est arriver centré, mais j'ai besoin de la div avec la classe "nauk-infos-liens" de lui-même pour être centré aligné à l'intérieur du col-3 div.
  • J'ai utilisé la méthode traditionnelle de centrage du conteneur .nauk-info-connexions{ border-radius:50%; border:1px solid $nauk-orange; height: 100px; width: 100px; margin: 0 auto; }
InformationsquelleAutor Praveen Kumar | 2017-03-01
  1. 131

    Il y a plusieurs horizontale de centrage méthodes de Bootstrap 4...

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

    mx-auto (auto x-axe marges) centre de display:block ou display:flex éléments qui ont une largeur définie, (%, vw, px, etc..). Flexbox est utilisé par défaut sur les colonnes de la grille, donc il y a aussi différents flexbox centrage méthodes.

    Démonstration de l'Amorçage de Centrage 4 Méthodes

    Dans votre cas, l'utilisation mx-auto au centre de la col-3 et text-center au centre de 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, à l'aide de justify-content-center sur flexbox éléments (.row):

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

    Voir aussi:

    Vertical Align Center dans le Bootstrap 4

    InformationsquelleAutor Zim
  2. 4

    Ajouter une classe text-center à votre colonne:

    <div class="col text-center">
I am centered
</div>
    InformationsquelleAutor zhekaus
  3. 3
    <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 classe au lieu de mx-auto comme dans cette réponse.

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

    • Ce sujet est déjà traité dans le haut-voté réponse
    • Corbett, j'ai utilisé les justifier-contenu-centre de classe à la place de la bourse-auto. C'est aussi une méthode de le faire. Les gens peuvent utiliser cela aussi que je suis juste essayer d'aider les autres. Merci
    • Ah, à droite. Eh bien, un peu d'explication peut aller un long chemin.
    • Corbett merci pour la révision:)
    InformationsquelleAutor Sarfaraz Kasmani