Comment puis-je centrer verticalement le contenu dans Twitter Bootstrap 3 ?

Centrage vertical du contenu dans Twitter Bootstrap 3

De nombreux utilisateurs ont rencontré des difficultés pour centrer verticalement le texte et les images dans Twitter Bootstrap 3. Cet article fournit une solution qui exploite un contenu réactif et dynamique.

Une approche consiste à utiliser le Propriété display:inline-block au lieu de float. Cela permet au contenu de s'aligner verticalement tout en conservant la capacité de répondre à différentes tailles d'écran. En incorporant vertical-align:middle, le texte et les images seront centrés verticalement.

Pour implémenter cette solution, ajoutez simplement le CSS suivant :

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

Ce centrera à la fois le texte et les images, quelle que soit leur taille relative.

Une démonstration de travail est disponible sur http://bootply.com/94402, montrant comment le contenu répond dynamiquement aux changements de résolution d'écran tout en conservant l'alignement vertical.

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!