223

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

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

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

4

15 回答 15

281

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

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

于 2013-12-13T07:55:37.573 回答
149

这样做的正确方法是

<div class="row text-center">
  <img ...>
</div>
于 2013-03-15T15:04:05.517 回答
127

2018 年更新

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

<img src="..." class="mx-auto d-block"/>
于 2017-04-08T12:14:02.760 回答
84

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

<img src="images/default.jpg" class="center-block img-responsive"/>
于 2014-01-10T22:34:24.400 回答
53

Twitter bootstrap 有一个以 .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;
}
于 2012-10-26T15:04:04.203 回答
36

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

<img src="..." alt="..." class="img-responsive center-block" />
于 2016-08-14T05:51:53.453 回答
30

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

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

编辑

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

于 2012-06-04T10:55:21.940 回答
18

为我工作。尝试使用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>
于 2015-03-13T08:44:01.170 回答
6

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

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;
}
于 2013-06-03T06:37:44.853 回答
1

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

.name-of-class .img-responsive { margin: 0 auto; }
于 2016-02-05T21:53:09.490 回答
1

如果浏览器版本没有问题，我们似乎可以使用新的 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 可以完美地位于浏览器的中心。

于 2016-03-24T09:37:18.107 回答
1

我正在使用justify-content-center类到容器内的一行。适用于 Bootstrap 4。

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>
于 2018-01-29T14:44:11.880 回答
0

你应该使用

<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;
        }
}
于 2014-02-21T13:58:09.320 回答
0

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

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}
于 2018-03-12T17:31:25.207 回答
-3

您可以更改先前解决方案的 CSS，如下所示：

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

这也应该使父级中的所有元素居中div。

于 2012-06-04T11:43:59.070 回答