Twitter Bootstrap 3, centra verticalmente il contenuto

So che è 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 riassume 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.

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

L’opzione 1 è quella di utilizzare display:table-cell . È necessario svuotare il bootstrap col- * usando float:none ..

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

http://bootply.com/94394


L’opzione 2 è display:flex to vertical align the row with 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