Comment obtenir un alignement vertical parfait du texte et des images dans Bootstrap 3 ?

Alignement vertical du texte et des images dans Twitter Bootstrap 3

Malgré la prévalence des demandes de renseignements sur ce sujet, parvenir à l'alignement vertical du texte et des images dans Twitter Bootstrap 3 peut s'avérer insaisissable, en particulier pour le contenu dynamique de dimensions variables.

Pour relever ce défi, une démonstration Bootply a été a été créé pour illustrer la mise en page souhaitée, où le texte et l'image sont centrés verticalement, quelle que soit leur taille relative.

La solution réside dans l'utilisation de display:inline-block au lieu de float pour les colonnes de texte et d'image. Cela nous permet d'utiliser vertical-align:middle avec le CSS suivant :

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

En fixant margin-right à une valeur négative, on s'assure que les colonnes sont placées côte à côte, tout en conservant leur alignement vertical .

Pour tester cette approche, accédez à la démo sur http://bootply.com/94402, où le texte et l'image sont correctement centrés verticalement, s'adaptant aux différents contenus. tailles.

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!