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

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

让图片相对于页面居中最简单的方法是什么?


当前回答

更新2018

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

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

其他回答

在 Bootstarp 5.0 中

Use

.mx-auto .d-block

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

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

您可以更改之前解决方案的CSS如下所示:

.container, .row { text-align: center; }

这也应该将父div中的所有元素居中。

你可以在引导img类中使用margin属性。

.name-of-class .img-responsive { margin: 0 auto; }

上面的很多选择对我都不起作用。 然而,这奏效了!

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