web-dev-qa-db-fra.com

Twitter Bootstrap 3, centre du contenu verticalement

Je sais que cela a été demandé mille fois, mais je ne trouve pas le moyen de centrer le texte et l'image verticalement.

J'utilise Twitter Bootstrap 3 avec un contenu dynamique. Par conséquent, je ne connais pas la taille ni du texte ni de l'image. De plus, je veux que tout soit réactif.

J'ai créé un bootply qui résume le type de présentation que j'essaie de réaliser. En gros, je veux que le texte et l'image soient centrés verticalement. Le texte n'est pas toujours plus gros que l'image.

Quelqu'un peut-il m'aider avec cela s'il vous plaît?

Je vous remercie.

htmlcsstwitter-bootstraptwitter-bootstrap-3
66
Jacques Bourque

Vous pouvez utiliser display:inline-block au lieu de float et vertical-align:middle avec ce CSS:

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

La démo http://bootply.com/94402

68
DaniP

L'option 1 consiste à utiliser display:table-cell. Vous devez vider le Bootstrap _ col- * en utilisant float:none ..

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

http://bootply.com/94394

Option 2 est display:flex pour aligner verticalement la ligne avec la flexbox:

.row.center {
   display: flex;
   align-items: center;
}

http://www.bootply.com/7rAuLpMCwr

Le centrage vertical est très différent dans Bootstrap 4 . Voir cette réponse pour Bootstrap 4 https://stackoverflow.com/a/41464397/171456

42
Zim