试图在Div中集中Img

-1

我试图将img放在div中没有成功，我试过很多CSS黑客。我错过了一些东西，我不知道我做错了什么。试图在Div中集中Img

标记

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

来源

2017-08-06 Sebastian Farham

删除'display：inline-block'，并简单地将'text-align：center'添加到父级。 –

@MitchelJager：文本对齐仅适用于内联元素。 –

''默认为内联。 – Rob

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

其次，您可以创建名称.text-center另一个类，添加CSS规则：text-align: center;最后是新创建的类添加到在这种情况下是<div class="col-md-4">

这是最后的结果父元素：https://jsfiddle.net/ydeeLLrd/1/ （包括对第一个问题的修复）

来源

2017-08-06 19:29:22

我只想说，你可以在你想要的任何父元素中使用'.text-center'类，这样你就不必每次都为每个元素重新输入相同的CSS规则。这很方便。 –

这应该工作：

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

来源

2017-08-06 19:27:14 Happysmithers

试图在Div中集中Img

回答

相关问题