Twitter Bootstrap 3, contenuto centrato verticalmente [duplicato]

Question

Questa domanda ha già una risposta qui:

allineamento verticale con Bootstrap 3 (23 risposte)

Chiuso 5 anni fa.

So che è stato chiesto mille volte, ma non riesco a trovare un modo per centrare verticalmente il testo e l'immagine.

Sto utilizzando Twitter Bootstrap 3 con contenuto dinamico, quindi non conosco la dimensione né del testo né dell'immagine.Inoltre, voglio che tutto sia reattivo.

Ho creato un bootply che riassumono il tipo di layout che sto cercando di ottenere.Fondamentalmente, 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.

Answer 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 dimostrazione http://bootply.com/94402

Answer 2

opzione 1 è usare display:table-cell.È necessario sbloccare Bootstrap col-* utilizzando float:none..

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

http://bootply.com/94394

---

opzione 2 È display:flex per allineare verticalmente la riga con 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