如何将图像死点与引导程序对齐

Question

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

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

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

原文由 Fixer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

中心内容块

设置要显示的元素：通过边距阻止和居中。可作为 mixin 和 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;
 }

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

原文由 user3098434 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这样做的正确方法是

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

原文由 fabiangebert 发布，翻译遵循 CC BY-SA 3.0 许可协议