Maison > interface Web > tutoriel CSS > Comment puis-je centrer verticalement le contenu dans Twitter Bootstrap 3 ?

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

Barbara Streisand
Libérer: 2024-12-06 02:47:09
original
690 Les gens l'ont consulté

How Can I Vertically Center Content in 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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal