如何将映像死点与引导对齐

Question

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

我尝试过各种技术，例如将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>

要获得相对于页面居中的图像，最简单的方法是什么？

Answer 1

2018年更新

引导程序4中不再存在中心块类。要在Bootstrap 4中居中显示图像，请使用mx auto d-block。。。

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

Answer 2

正确的做法是

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

Answer 3

Twitter Bootstrap v3.0.3有一个类：中心块

中心内容块

设置一个元素以显示：块和中心通过边距。可作为混音和类使用。

只需添加一个类。img标签中的中央块，如下所示

<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 {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

你可以从这里看到一个样本