-1

I'm trying to center an img in a div without success and I have tried many CSS hacks. I'm missing something and I have no idea what I'm doing wrong.

Markup

<div class="col-md-6">
  <div class="row">     
    <div class="col-md-4" > 
      <div class="img-guarantee">  
        <img src='img/clock.png' class='img-responsive'> 
      </div>
    </div>
  </div>
</div>

CSS

.img-guarantee img{ 
  display: inline-block;
  margin: 0 auto;
 }
Frank Fajardo
  • 5,402
  • 23
  • 42
Sebastian Farham
  • 797
  • 2
  • 8
  • 24

2 Answers2

1

This should work:

.img-guarantee img{ 
  margin: 0 auto;
 }
 
 .img-guarantee {
   text-align: center;
 }
<div class="col-md-6">
 <div class="row">     
  <div class="col-md-4" > 
   <div class="img-guarantee">  
     <img src='img/clock.png' class='img-responsive'> 
   </div>
  </div>
 </div>
Happysmithers
  • 603
  • 6
  • 13
1

First of all, using a column outside a row is not advised whatsoever. I take it that you use Bootstrap so it's only appropriate to use a column within a row.

Secondly, you can create another class by the name .text-center, add the CSS rule: text-align: center; and finally add the newly created class to the parent element which in this case is <div class="col-md-4">

This is the final result: https://jsfiddle.net/ydeeLLrd/1/ (including a fix to the first issue)

Nick Gatzouli
  • 368
  • 2
  • 8
  • I just want to say that you can use the class `.text-center` in any parent element you want so that you don't have to re-type the same CSS rules every time for every element. It's handy. – Nick Gatzouli Aug 06 '17 at 20:13