Question

我试图将一个img集中在div中但没有成功，我尝试了很多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

这应该有效：

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

Answer 2

首先，不建议使用行外的列。我认为你使用Bootstrap所以它只适合在一行中使用一列。

其次，您可以使用名称.text-center创建另一个类，添加CSS规则：text-align: center;，最后将新创建的类添加到父元素，在本例中为<div class="col-md-4">

这是最终结果：https://jsfiddle.net/ydeeLLrd/1/（包括对第一期的修复）

试图在一个分区中心

2 个答案: