2016-03-24

Vertically Centered Column Content–Bootstrap

While we sent man to the moon there is no nice and simple solution to vertically center content of two columns. The below example demonstrates how I did it using Bootstrap 3.* and some CSS magic.

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

Then use it in your HTML as:

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

No comments:

Post a Comment