我正在使用引导框架,并试图获得一个图像水平居中没有成功。

我尝试了各种技术,如将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>

其他回答

添加'center-block'到图像类-不需要额外的css

<img src="images/default.jpg" class="center-block img-responsive"/>

更新2018

在Bootstrap 4中,中心块类不再存在。使用mx-auto d-block…

<img src="..." class="mx-auto d-block"/>

你应该使用

<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;
        }
}

正确的做法是

<div class="row text-center">
  <img ...>
</div>

你可以用下面的。支持Bootstrap 3。上面的x。

<img src="..." alt="..." class="img-responsive center-block" />