我正在使用引导框架，并试图获得一个图像水平居中没有成功。
我尝试了各种技术，如将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>
让图片相对于页面居中最简单的方法是什么?
当前回答
我对容器中的一行使用了justification -content-center类。与Bootstrap 4合作良好。
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>
其他回答
正确的做法是
<div class="row text-center">
<img ...>
</div>
Twitter bootstrap有一个以。pagation - centric为中心的类
这对我来说很有效:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
这个类的css是:
.pagination-centered {
text-align: center;
}
上面的很多选择对我都不起作用。 然而，这奏效了!
<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;
}
你可以用下面的。支持Bootstrap 3。上面的x。
<img src="..." alt="..." class="img-responsive center-block" />
