Comment obtenir un alignement vertical dans Bootstrap 4 ?

Alignement vertical dans Bootstrap 4

L'alignement d'éléments comme des éléments de texte dans Bootstrap 4 peut être frustrant. En règle générale, l'utilitaire d'alignement de texte ne peut être utilisé que pour l'alignement horizontal, et la plupart des techniques d'alignement vertical sont généralement mises en œuvre en ajoutant un balisage supplémentaire et en remplaçant le style par défaut.

flex-xs-middle class

Les anciennes versions de Bootstrap (telles que Bootstrap 3 et les versions antérieures de Bootstrap 4) utilisent la classe flex-xs-middle pour verticalement éléments centraux. Cette classe peut être ajoutée à un conteneur pour centrer verticalement son contenu à l'aide de flexbox :

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

Mises à jour de Bootstrap 4.0.0

À partir de Bootstrap 4.0.0, flexbox devient le paramètre par défaut. Il est donc désormais possible d'aligner des éléments verticalement en utilisant plusieurs méthodes :

auto-margins

L'utilitaire my-auto peut être utilisé pour centrer automatiquement les éléments verticalement, par exemple :

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

flexbox

flexbox Des utilitaires, tels que align-self-center, peuvent être utilisés pour aligner une seule colonne ou toutes les colonnes d'une ligne entière, par exemple :

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

Utilitaires d'affichage

Bootstrap 4 est également livré avec un ensemble d'utilitaires d'affichage qui peuvent être utilisés comme alternative à l'alignement vertical, par exemple :

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

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!