CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
randombits
randombits

Reputation: 48490

bootstrap 3.3.7 vertical align center image column

I have some basic markup that looks like the following:

<div class="list-content sales">    
    <div class="row row-eq-height"> 
        <div class="col-sm-2 col-xs-12" style="border: 1px solid black;">
            <img src="https://picsum.photos/223/176" class="img-responsive img-rounded">
        </div>
        <div class="col-sm-10 col-xs-12" style="border: 1px solid black;">
            <div class="sale-details">
                <h2>Sale Test</h2><i class="fa fa-heart-o" aria-hidden="true"></i>
                <p>Sale buyer</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
    </div>
</div>

My problem is the first col where the img is, I cannot get any sort of vertical-alignment going. I've tried using the center-block bootstrap class. The only way I can get it moving is with margin-top markup, but I want the correct way of vertically aligning this image of the column. Here's what it ends up looking like. You can see it flush against the top of the column which is not the behavior I'm looking for:

enter image description here

Is there a built-in class I can be using in Bootstrap 3.3.7 to vertically align my image?

Upvotes: 2

Views: 2248

Answers (1)

Rytis Dereskevicius
Rytis Dereskevicius

Reputation: 1481

This is quite easy to do it. :) Just add this inline-CSS to img parent div:

display: flex;
align-items: center;

<div class="col-sm-2 col-xs-12" style="border: 1px solid black; display: flex; align-items: center;">

Upvotes: 2

Related Questions