CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Maeh
Maeh

Reputation: 1764

Bootstrap vertical align

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?

Upvotes: 2

Views: 342

Answers (2)

Calvintwr
Calvintwr

Reputation: 8798

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.

Upvotes: 2

artm
artm

Reputation: 8584

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

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

for the container divs.

Upvotes: 0

Related Questions