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

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

您可以看到here

中的示例

Answer 2

正确的方法是

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

Answer 3

将“中心块”添加到图像作为类 - 不需要额外的CSS

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

Answer 4

更新2018年

Bootstrap 4 中不再存在center-block类。要在Bootstrap 4中居中图像，请使用mx-auto d-block ...

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

Answer 5

Twitter引导程序有一个以：.pagination为中心的类

这对我有用：

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

该课程的CSS为：

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

Answer 6

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

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

Answer 7

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

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

修改

如其他答案中所述，您可以将引导CSS类.text-center添加到父元素。这完全相同，可用于 v2.3.3 和 v3

Answer 8

适合我。尝试使用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>

Answer 9

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

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

Answer 10

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

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

Answer 11

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

HTML文件中的

：

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

在CSS文件中，我们写道：

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

所以div可以完全成为浏览器的中心。

Answer 12

你应该使用

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

Answer 13

我正在将justify-content-center类用于容器中的一行。适用于Bootstrap 4。

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

Answer 14

我创建了这个并添加到Site.css。

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

Answer 15

您可以更改上一个解决方案的CSS，如下所示：

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

这也应该集中在父div中的所有元素。

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

15 个答案: