我正在使用引导框架，并试图获得一个图像水平居中没有成功。
我尝试了各种技术，如将12个网格系统分成3个相等的块
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
让图片相对于页面居中最简单的方法是什么?
当前回答
上面的很多选择对我都不起作用。 然而，这奏效了!
<div class="container">
<div class="row">
<div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
</div>
</div>
其他回答
我创建了这个并添加到Site.css中。
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}
你应该使用
<div class="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
@media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
@media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}
假设图片旁边没有其他东西，最好的方法是在img父目录中使用text-align: center:
.row .span4 {
text-align: center;
}
Edit
正如在其他答案中提到的，您可以将引导CSS类.text-center添加到父元素中。它做的事情完全相同，并且在v2.3.3和v3中都可用
对我有用。试着使用中心方块
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
您可以更改之前解决方案的CSS如下所示:
.container, .row { text-align: center; }
这也应该将父div中的所有元素居中。
