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

Centrage vertical du contenu dans Twitter Bootstrap 3

Pour un alignement vertical réactif et dynamique du texte et des images dans Bootstrap 3, envisagez l'approche suivante :

CSS Code :

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

Explication :

Le CSS fourni apporte les modifications nécessaires aux colonnes Bootstrap d'origine :

• float : none supprime l'alignement horizontal, permettant l'alignement vertical.
• display : inline-block traite les colonnes comme en ligne éléments, qui peuvent être alignés verticalement.
• vertical-align : middle centre verticalement le contenu dans les colonnes.
• margin-right : -4px corrige des problèmes mineurs d'espacement entre les colonnes.

Démo :

Visitez [http://bootply.com/94402](http://bootply.com/94402) pour voir une démonstration fonctionnelle de cette solution.

Remarques supplémentaires :

• Assurez-vous que les éléments du conteneur ont une hauteur suffisante pour que l'alignement vertical soit work.
• Si vous avez besoin de différentes tailles de colonnes, ajustez les classes col-lg en conséquence.
• Si vous rencontrez des problèmes avec différentes tailles d'image, ajustez la propriété vertical-align si nécessaire.

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!