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

Question

愚蠢的问题：我有三个连续的图像，但它们在各自的列中向左对齐。如何将它们对齐到列的中心？

这是我的代码：

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

Answer 1

将文本中心 class 添加到您的列 div

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

Answer 2

想法是使图像 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>

Answer 3

首先你不能在同一个元素上写 2 class 标签

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

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

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

谢谢，希望对您有所帮助。

Answer 4

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

它会挑衅地工作。

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

How can I align an image to the center in a Bootstrap column?

html

css

image

vertical-alignment

twitter-bootstrap