如何将图像与 Bootstrap 列的中心对齐？答案

【问题标题】：How can I align an image to the center in a Bootstrap column?如何将图像与 Bootstrap 列的中心对齐？
【发布时间】：2015-08-06 21:21:35
【问题描述】：

愚蠢的问题：我连续有三张图片，但它们在其列的左侧对齐。如何将它们与列的中心对齐？

这是我的代码：

 <div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">  
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">    
</div>
</div>

还有 CSS：

.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}

【问题讨论】：

标签： html css image twitter-bootstrap vertical-alignment

【解决方案1】：

将 text-center 类添加到您的列 div 中

<div class="col-md-4 col-sm-4 col-xs-4 text-center">

【讨论】：

【解决方案2】：

首先你不能在同一个元素上写两个类标签

<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">

你可以写class="img-circle img-responsive"

对于居中对齐，你可以使用"text-center" 类到父 div.. 或者您也可以将style="float:none; margin:0 auto;" 应用到img。

谢谢，希望对你有帮助。

【讨论】：

【解决方案3】：

这个想法是让图像block元素和自动边距。但因为 margin:auto 将无法工作，除非您指定一些元素的宽度。

.partners img{
    display: block;
    margin: auto;
    text-align: center;
    width: 150px;
}

.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
.partners img{
    display: block;
    margin: auto;
    text-align: center;
    width: 150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">  
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">    
</div>
</div>

【讨论】：

【解决方案4】：

<div class="text-center">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>

它会很有效。

【讨论】：