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

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

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


当前回答

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

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

其他回答

假设图片旁边没有其他东西,最好的方法是在img父目录中使用text-align: center:

.row .span4 {
    text-align: center;
}

Edit

正如在其他答案中提到的,您可以将引导CSS类.text-center添加到父元素中。它做的事情完全相同,并且在v2.3.3和v3中都可用

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

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

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

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

这也应该将父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="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>