Twitter Bootstrap 3, centra verticalmente il contenuto [duplicato] - html, css, twitter-bootstrap, twitter-bootstrap-3

So che questo è stato chiesto migliaia di volte ma non riesco a trovare un modo per rendere il testo e l'immagine centrati verticalmente.

Sto usando Twitter Bootstrap 3 con contenuti dinamici quindi non conosco la dimensione né sul testo né sull'immagine, inoltre, voglio che tutto sia reattivo.

Ho creato un bootply che riassumono il tipo di layout che sto cercando di ottenere: in sostanza, voglio che il testo e l'immagine siano centrati verticalmente.Il testo non è sempre più grande dell'immagine.

Qualcuno può aiutarmi con questo per favore?

Grazie.

risposte:

64 per risposta № 1

Puoi usare display:inline-block invece di float e vertical-align:middle con questo CSS:

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

La demo http://bootply.com/94402

---

38 per risposta № 2

opzione 1 è da usare display:table-cell. È necessario slacciare il Bootstrap col- * usando float:none..

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

http://bootply.com/94394

---

opzione 2 è display:flex allineare verticalmente la riga con la flexbox:

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

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

---

Il centraggio verticale è molto diverso in Bootstrap 4. Vedi questa risposta per Bootstrap 4 https://stackoverflow.com/a/41464397/171456

---