69

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Jacques Bourque
  • 1,087
  • 1
  • 8
  • 19

2 Answers2

68

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

DaniP
  • 37,813
  • 8
  • 65
  • 74
  • Thanks Danko, your solution is indeed working but I'm not a big fan of setting negative margins. I am not even sure where comes the -4. Anyway, thanks for your time! :) – Jacques Bourque Nov 15 '13 at 18:03
  • Is to avoid the space between inline-block elements – DaniP Nov 15 '13 at 18:23
  • But will it always be -4px? Where does this number comes from? – Jacques Bourque Nov 15 '13 at 20:46
  • 1
    Well the inline-block elements interpret blank spaces in the html markup and left a little white space ... you can set your html all inline or get this solution see this fiddle to clarify the concept http://jsfiddle.net/3vCKP/4/ if you reduce the margin-negative then you see the space – DaniP Nov 15 '13 at 20:51
  • Thanks for the info! That clarifies it all. :) – Jacques Bourque Nov 15 '13 at 20:55
  • 2
    @JacquesBourque to make this more clear check this link i found http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – DaniP Nov 15 '13 at 20:57
  • Thanks @Danko, it does clarifies a but more your explanation. This also confirm to me that the -4px can be something else. I guess the -4px is for the normal text size so I should be good with it. – Jacques Bourque Nov 17 '13 at 14:50
  • 4
    This solution doesn't work anymore. :( – Leo Aug 29 '14 at 21:08
  • 3
    Note that every column of the row must implement that class. If one of the column is not implementing it, it fails. – Moebius Sep 16 '14 at 15:07
46

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

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 3
    Thanks Skelly! I tried a solution like yours before but I was missing 'float: none'. Plus, in my real project, I was setting 'hidden-xs' on the same '
    ' as the one defining the 'col-sm-x'. Works great now!
     – Jacques Bourque Nov 15 '13 at 18:02
  • 1
    I just hit one small issue. I am loosing the img-responsive feature now. Is there a way to have both (responsive and centered)? – Jacques Bourque Nov 15 '13 at 18:09
  • I'm gonna have to mark Danko's anwser as accepted since it fixes the vertical alignment and the responsive feature of the image. I guess the issue come from the fact that we change the 'display' on the row and/or the column. – Jacques Bourque Nov 15 '13 at 20:45
  • 4
    remember the parent element must either have `display: table;` set or have a specific height set for this to work. – Magne Mar 21 '14 at 18:00
  • 2
    This solution breaks for me when columns wrap: http://getbootstrap.com/css/#grid-example-wrapping. – Jess Mar 22 '15 at 18:27
  • Nice option 2 without overwriting the float attribute! – MattAllegro Jul 11 '18 at 10:11