Twitter Bootstrap 3, vertically center content [duplicate]

Question

This question already has answers here:

vertical-align with Bootstrap 3 (23 answers)

Closed 5 years ago.

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