2

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?

randombits
  • 47,058
  • 76
  • 251
  • 433

1 Answers1

2

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;">
Rytis Dereskevicius
  • 1,261
  • 14
  • 15
  • first inline style are never a good idea, then he is using bootstrap V3 so using flex with it is not a good idea unless your recommed him to upgrade to V4 ... he also asked about a built in class to use – Temani Afif May 07 '18 at 22:41
  • 2
    We are not discussing if inline-CSS is good or bad. The question was how to centre the image, Am I right, sir? :) – Rytis Dereskevicius May 07 '18 at 22:43
  • The inline-style is not the only reason, he is asking about a built in class to use with boostrap, not a generic way to center with CSS – Temani Afif May 07 '18 at 22:47
  • Enjoy - [Bootstrap 3 vertical Align options](https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?noredirect=1&lq=1) – Rytis Dereskevicius May 07 '18 at 22:51