Twitter Bootstrap 3, vertically center content

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.

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

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