我正在使用引导框架，并试图获得一个图像水平居中没有成功。
我尝试了各种技术，如将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>
让图片相对于页面居中最简单的方法是什么?
当前回答
你可以在引导img类中使用margin属性。
.name-of-class .img-responsive { margin: 0 auto; }
其他回答
我也需要同样的东西，在这里我找到了解决方案:
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;
}
正确的做法是
<div class="row text-center">
<img ...>
</div>
只需使用下面的引导类来修复它
<img class="mx-auto d-block" src="../path/to/.." alt="Image">
我对容器中的一行使用了justification -content-center类。与Bootstrap 4合作良好。
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>
更新2018
在Bootstrap 4中，中心块类不再存在。使用mx-auto d-block…
<img src="..." class="mx-auto d-block"/>
