部門内のImgを中心にしようとしています

Question

私はdivを成功させることなくimgを中心にしようとしています。私は多くのCSSハックを試みました。私は何かが足りなくて、何が間違っているのか分かりません。

マークアップ

<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; 
} 

Answer 1

まず、行外の列を使用することはまったく推奨されません。ブートストラップを使用するので、行内の列を使用するのが適切です。

第二に、あなたは、名前.text-centerで別のクラスを作成するCSSルールを追加することができます：text-align: center;をし、最終的に、この場合にはこれが最終的な結果である<div class="col-md-4">

ある親要素に、新しく作成したクラスを追加します。https://jsfiddle.net/ydeeLLrd/1/ （第1号への修正を含む）

Answer 2

これは動作するはずです：

.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>