如何使用引导程序对齐图像死点

我正在使用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>

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

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

中心内容块

设置要显示的元素：通过边距阻止和居中。可作为mixin和class。

只需.center-block在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

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

您可以从这里看到一个示例

正确的做法是

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

更新2018

该center-block级不再存在引导4。要将映像放在Bootstrap 4中居中，请使用mx-auto d-block...

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

将“中心块”添加到图像作为类-无需其他CSS

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

Twitter引导程序有一个以以下内容为中心的类：.pagination-centered

它对我有用：

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

该类的css是：

.pagination-centered {
  text-align: center;
}

您可以使用以下内容。它支持上面的Bootstrap3.x。

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

假设图像旁边没有其他内容，最好的方法是text-align: center在img父级中使用：

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

编辑

如其他答案所述，您可以将bootstrap CSS类添加.text-center到父元素。这确实做同样的事情，并且在v2.3.3和v3中都可用

为我工作。尝试使用center-block

<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>

我需要同样的东西，在这里我找到了解决方案：

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;
}

您可以将margin属性与bootstrap img类一起使用。

.name-of-class .img-responsive { margin: 0 auto; }

如果浏览器版本没有问题，我们似乎可以使用HTML5的新功能：

在HTML文件中：

<div class="centerBloc">
  I will be in the center
</div>

在CSS文件中，我们编写：

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

因此，div可能是浏览器的完美中心。

你应该用

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

我正在使用justify-content-center类到容器中的一行。与Bootstrap 4兼容。

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

我创建了此文件并将其添加到Site.css。

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

您可以按以下方式更改先前解决方案的CSS：

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

这也应将所有元素置于父元素的中心div。