Comment centrer verticalement le contenu dans Bootstrap 4 ?

Alignement vertical dans Bootstrap 4

Introduction au problème

Dans Bootstrap 4, l'alignement vertical de certains éléments peut être difficile. Une difficulté courante survient lorsque l'on tente de centrer verticalement le contenu d'une ligne, en particulier l'élément contenant le texte « Fournisseur ».

Présentation de la solution

Bootstrap 4 introduit plusieurs méthodes d'alignement vertical, notamment les utilitaires Flexbox. , marges automatiques et utilitaires d'affichage.

Approche Flexbox

Bootstrap 4 Alpha 5 et versions antérieures :

<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>

Bootstrap 4 Stable :

<div class="row">
    <div class="col-sm-12 align-self-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Bootstrap 4 Flexbox par défaut :

<div class="row">
    <div class="col-sm-12 d-flex align-items-center justify-content-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Marges automatiques Approche

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

Approche des utilitaires d'affichage

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

Conclusion

Ces méthodes offrent diverses options pour aligner verticalement les éléments dans Bootstrap 4. N'oubliez pas de choisir l'approche qui convient le mieux vos exigences spécifiques et considérations de compatibilité du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!