web-dev-qa-db-fra.com

Alignement vertical dans Bootstrap 4

J'ai la configuration suivante dans Bootstrap 4: lien Bootply

L'élément avec le texte "Fournisseur" doit être centré verticalement, j'ai différentes lignes avec le même code et je veux les centrer. Aucune solution ne semble fonctionner pour moi.

Est-ce que quelqu'un ici peut trouver ce que j'ai fait de mal et me diriger dans la bonne direction?

Je vous remercie.

bootstrap-4twitter-bootstrap-4
25
Nelsch

Vous pouvez utiliser le flex-xs-middle classe comme ça ..

Bootstrap 4 Alpha 5 

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5 (Utilisation de Bootstrap 4 flexbox CSS activé))

Bootstrap 4

UPDATE pour Bootstrap 4.0.0

Maintenant que Bootstrap 4 est flexbox par défaut , il existe de nombreuses approches différentes de l'alignement vertical à l'aide de: auto -margins , flexbox utils , ou les utilitaires d'affichage avec alignement vertical des utils . Au début, "alignement vertical des utils" semble évident, mais ceux-ci seulement fonctionnent avec des éléments d'affichage en ligne et sous forme de tableau. Vous trouverez ci-dessous le Bootstrap 4 options de centrage vertical. N'oubliez pas que l'alignement vertical est relatif à hauteur du parent .

1 - Centre vertical à l'aide des marges automatiques:

Une autre façon de centrer verticalement consiste à utiliser my-auto. Cela va centrer l'élément dans son conteneur. Par exemple, h-100 rend la ligne pleine hauteur et my-auto va centrer verticalement le col-sm-12 colonne.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centre vertical à l'aide des marges automatiques Démo

my-auto représente les marges sur l’axe des y vertical et équivaut à:

margin-top: auto;
margin-bottom: auto;

2 - Centre vertical avec Flexbox:

vertical center grid columns

Depuis Bootstrap 4 .row est maintenant display:flex vous pouvez simplement utiliser align-self-center sur n'importe quelle colonne pour la centrer verticalement ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

ou utiliser align-items-center sur l'ensemble .row pour centrer verticalement tous les col-* dans la rangée...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Colonnes de hauteur différente au centre vertical Démo

Important: Le direct parent de l'élément à être aligné doit avoir défini hauteur !

3 - Centre vertical à l'aide des utilitaires d'affichage:

Bootstrap 4 a tilitaires d’affichage pouvant être utilisé pour display:table, display:table-cell, display:inline, etc .. Ceux-ci peuvent être utilisés avec les tils d'alignement vertical pour aligner des éléments de cellule inline, inline-block ou tableau.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

centre vertical utilisant les utilitaires d’affichage démo

70
Zim