Bootstrap vertical align

Question

I have a bunch of images in my bootstrap application.

I am trying to get them vertically aligned, like this:

enter image description here

This is what I currently have: http://jsfiddle.net/9v97xsp9/

And the HTML:

<div class="row">
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/300/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/200/400/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/500/250/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/250/400/" alt="" />
    </div>
</div>

How can I accomplish this?

http://howtocenterincss.com/ not especially for bootstrap, but a starting point — 23tux, May 04 '15 at 13:50

Calvintwr · Accepted Answer · 2015-05-04T16:42:11.110

Give your row a class .imageRow so that you don't affect other col-md-2 classes.

<div class="row imageRow">
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/300/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/200/400/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/500/250/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/250/400/" alt="" />
    </div>
</div>

Then use the following CSS:

.imageRow {
    font-size: 0px;
    line-height: 0px;
}
.imageRow .col-md-2 {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
@media (min-width: 992px) {
    .imageRow .col-md-2 {
        display: inline-block;
    }
}

https://jsfiddle.net/9v97xsp9/2/

Explanation:

Bootstrap uses float for their layout. Which IMO is a really lousy way to do things because it was not meant for positioning containers but rather allow text-wrapping around images or containers.

In using float, the elements effectively no longer "occupy space". Hence, we need to remove it.

Additionally, in order for sibling elements to vertical align themselves, they need to be inline elements. In this case, inline-block is the ideal property to use.

inline elements have natural whitespaces. So the workaround is to take out the font and line-height.

Thank you for taking your time to write a thorough answer. However, it doesn't seem to work at the first breakpoint (http://jsfiddle.net/9v97xsp9/2/) — Maeh, May 04 '15 at 15:53

score 0 · Answer 2 · answered May 04 '15 at 13:55

0

See http://jsfiddle.net/9v97xsp9/1/

.va{
    display: table-cell; 
    vertical-align: middle;
}

for the container divs.

answered May 04 '15 at 13:55

artm

8,554
3
26
43

Bootstrap vertical align

2 Answers2

Linked