Jacques Bourque Jacques Bourque -4 years ago 108
CSS Question

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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download