CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Joe
Joe

Reputation: 26847

Vertically-align images in a 4-column layout using Bootstrap 3

Yes folks, it's another vertical-alignment question! I'm trying to do something pretty simple with Bootstrap 3, but hitting a wall on it. I'm building on the answer to this related question, but hitting the problem described below.

Here's the markup:

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://2.bp.blogspot.com/-91OnmwoX5t0/T8reMB25ReI/AAAAAAAACQQ/D_jlmi6vWTw/s1600/GREEN+LANTERN+LOGO.png">
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://ecx.images-amazon.com/images/I/41biZJowGyL._SY300_.jpg">
    </div>
  </div>
</div>

And the CSS:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

img {
  max-width:200px;
}

When "float:none;" is included on .vcenter, the images are vertically-aligned as desired. However, the fourth column wraps underneath the other three.

When "float:none;" is commented out, the 4-column layout is achieved, but the images aren't vertically-aligned.

Bootply example so you can see what I mean.

Any idea how to get a four-column layout and vertically-aligned images?

Upvotes: 1

Views: 3022

Answers (2)

joshhunt
joshhunt

Reputation: 5345

The issue is that display:inline-block takes the white space into account. If you stack the column divs right next to each with no new paragraph spaces it will line up correctly. So it would end up like this:

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
    </div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
    </div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://2.bp.blogspot.com/-91OnmwoX5t0/T8reMB25ReI/AAAAAAAACQQ/D_jlmi6vWTw/s1600/GREEN+LANTERN+LOGO.png">
    </div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://ecx.images-amazon.com/images/I/41biZJowGyL._SY300_.jpg">
    </div>
  </div>
</div>

For more info see:

Stackoverflow: css - two inline-block, width 50% elements don't stack

CSS-Tricks: Fighting the Space Between Inline Block Elements

Upvotes: 1

kiaaanabal
kiaaanabal

Reputation: 384

The float on columns in Bootstrap 3 helps to account for the few pixels too large they are. To fix this you just need to play around with the margin a little:

.vcenter .col-xs-3, .vcenter .col-sm-3, .vcenter .col-md-3, .vcenter .col-lg-3 {
    margin: 0px -2px;
}

Hope this helps!

Upvotes: 0

Related Questions