我正在使用引导框架，并试图获得一个图像水平居中没有成功。
我尝试了各种技术，如将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="row text-center">
<img ...>
</div>
其他回答
Twitter Bootstrap v3.0.3有一个类:center-block
中心内容块 设置要显示的元素:块和居中通过边距。可作为mixin和类使用。
只需要在img标签中添加一个类.center-block，如下所示
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
在Bootstrap中已经有css样式调用.center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
你可以看到这里的一个样本
对我有用。试着使用中心方块
<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>
我也需要同样的东西，在这里我找到了解决方案:
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
和CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
假设图片旁边没有其他东西，最好的方法是在img父目录中使用text-align: center:
.row .span4 {
text-align: center;
}
Edit
正如在其他答案中提到的，您可以将引导CSS类.text-center添加到父元素中。它做的事情完全相同，并且在v2.3.3和v3中都可用
更新2018
在Bootstrap 4中，中心块类不再存在。使用mx-auto d-block…
<img src="..." class="mx-auto d-block"/>
