我正在使用引导框架，并试图获得一个图像水平居中没有成功。
我尝试了各种技术，如将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>
让图片相对于页面居中最简单的方法是什么?
当前回答
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="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
@media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
@media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}
你可以在引导img类中使用margin属性。
.name-of-class .img-responsive { margin: 0 auto; }
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;
}
在 Bootstarp 5.0 中
Use
.mx-auto .d-block
对我有用。试着使用中心方块
<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>
