我正在使用引导框架，并试图获得一个图像水平居中没有成功。
我尝试了各种技术，如将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>
其他回答
我创建了这个并添加到Site.css中。
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}
添加'center-block'到图像类-不需要额外的css
<img src="images/default.jpg" class="center-block img-responsive"/>
只需使用下面的引导类来修复它
<img class="mx-auto d-block" src="../path/to/.." alt="Image">
对我有用。试着使用中心方块
<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>
如果浏览器版本不是问题的话，我们可以使用新的HTML5功能:
在HTML文件中:
<div class="centerBloc">
I will be in the center
</div>
在CSS文件中，我们写:
body .centerBloc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
因此，div可以在浏览器中完美地居中。
