Twitter Bootstrap 3, vertically center content [duplicate]

Question

I know this has been asked a thousand time but I can't find a way to make the text and image to be centered vertically.

I'm using Twitter Bootstrap 3 with dynamic content so therefor, I do not know the size on neither the text nor the image. Plus, I want it all to be responsive.

I've created a bootply that summarize the kind of layout I'm trying to achieve. Basically, I want the text and image to be vertically centered. The text is not always bigger than the image.

Can someone help me out with this please?

Thank you.

Answer 1

You can use display:inline-block instead of float and vertical-align:middle with this CSS:

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

The demo http://bootply.com/94402

Answer 2

Option 1 is to use display:table-cell. You need to unfloat the Bootstrap col-* using float:none..

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

http://bootply.com/94394

---

Option 2 is display:flex to vertical align the row with flexbox:

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

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

---

Vertical centering is very different in Bootstrap 4. See this answer for Bootstrap 4 https://stackoverflow.com/a/41464397/171456