我正在使用引导框架，并试图获得一个图像水平居中没有成功。
我尝试了各种技术，如将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>
让图片相对于页面居中最简单的方法是什么?
当前回答
你可以用下面的。支持Bootstrap 3。上面的x。
<img src="..." alt="..." class="img-responsive center-block" />
其他回答
我对容器中的一行使用了justification -content-center类。与Bootstrap 4合作良好。
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>
您可以更改之前解决方案的CSS如下所示:
.container, .row { text-align: center; }
这也应该将父div中的所有元素居中。
添加'center-block'到图像类-不需要额外的css
<img src="images/default.jpg" class="center-block img-responsive"/>
对我有用。试着使用中心方块
<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>
你可以用下面的。支持Bootstrap 3。上面的x。
<img src="..." alt="..." class="img-responsive center-block" />
