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

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

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


当前回答

正确的做法是

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

其他回答

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

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

Edit

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

我也需要同样的东西,在这里我找到了解决方案:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

和CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

只需使用下面的引导类来修复它

<img class="mx-auto d-block" src="../path/to/.." alt="Image">

正确的做法是

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

更新2018

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

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