Bootstrap responsive image vertical center

Question

I would like to find a solution, where in the desktop view (bigger than col-sm), the responsive picture in the index_img class is vertical in the center align related to the index_shortdescription text. I tried more solutions, but I did'nt find the answer.

Example JSBIN

<div class="postbox" data-page-url="/">
    <h2 class="index_title"><a href="/blog/post/sandisk-ultra-fit">SanDisk Ultra Fit 32GB</a></h2>
    <div class="row">
        <div class="col-sm-4 index_img"><a href="/blog/post/sandisk-ultra-fit">
            <img src="/content/img/index/sandisk-compressor.png" class="img-responsive center-block" alt="SanDisk Logo"></a>
        </div>
        <div class="col-sm-8 index_shortdescription"><p>VERY LONG TEXT</p></div>
    </div>  
</div>

score 1 · Accepted Answer · answered Apr 25 '16 at 14:20

Add the following css:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

Then change the "row" class to "row-eq-height" and add a style="verical-align:center"

<div class="postbox" data-page-url="/">
    <h2 class="index_title"><a href="/blog/post/sandisk-ultra-fit">SanDisk Ultra Fit 32GB</a></h2>
    <div class="row-eq-height">
        <div class="col-sm-4 index_img" style="verical-align:center" ><a href="/blog/post/sandisk-ultra-fit">
            <img src="/content/img/index/sandisk-compressor.png" class="img-responsive center-block" alt="SanDisk Logo"></a>
        </div>
        <div class="col-sm-8 index_shortdescription"><p>VERY LONG TEXT</p></div>
    </div>  
</div>

Bootstrap responsive image vertical center

1 Answers1