Comment centrer verticalement le contenu dans Bootstrap 3 ?

Centrer verticalement le contenu dans Twitter Bootstrap 3

Lorsque vous travaillez avec du contenu dynamique dans Bootstrap 3, un défi courant consiste à centrer verticalement le texte et les images , surtout lorsque leurs tailles peuvent varier. Voici comment obtenir cette mise en page réactive et centrée verticalement :

Solution :

Au lieu d'utiliser la propriété float traditionnelle, optez pour display:inline-block et appliquez vertical -align:milieu aux éléments pertinents avec ce qui suit CSS :

.col-lg-4, .col-lg-8 {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}

Explication :

• display:inline-block permet aux éléments de s'asseoir côte à côte tout en conservant la possibilité d'appliquer la hauteur et la largeur.
• vertical-align:middle aligne le centre vertical de l'élément avec le milieu de son parent.
• Le La marge négative à droite ajuste l'espacement entre les éléments pour une mise en page plus raffinée.

Démo :

Pour une démonstration en direct, visitez : http://bootply .com/94402

Cette solution garantit que le texte et les images sont centrés verticalement dans leurs colonnes respectives, même lorsque leurs tailles changent dynamiquement, offrant ainsi une réponse réactive. et une mise en page visuellement attrayante.

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!