css - 如何将图像死点与 Bootstrap 对齐

Question

我正在使用 bootstrap 框架并试图使图像水平居中但没有成功..

我尝试过各种技术，例如将 12 网格系统分成 3 个相等的 block ，例如

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

使图像相对于页面居中的最简单方法是什么？

Answer 1

Twitter Bootstrap v3.0.3 有一个类:center-block

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

只需要在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;
 }

您可以从 here 查看示例