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

【问题标题】：How to align an image dead center with bootstrap如何将图像死点与引导程序对齐
【发布时间】：2012-06-08 10:42:58
【问题描述】：

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

我尝试了各种技术，例如将 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.github.com/bootstrap/scaffolding.html#gridSystem
有人将此标记为不是答案，我同意。请将此添加为评论，您的答案将很快被删除。
如果您的 img 标签上有 img-responsive 类，则图像可能不会居中。 请参阅 this SO answer 了解为什么使用引导程序center-block 类会以引导方式解决该问题。
如果您使用引导程序，您可以这样做：stackoverflow.com/a/59469712/4654957

标签： css twitter-bootstrap

【解决方案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的示例

【讨论】：

container div 上的结束 </div> 标记看起来不见了。这对我在 v3.3.7 上不起作用

【解决方案2】：

如果浏览器版本没有问题，我们似乎可以使用新的 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 的类被称为 .centerBloc 并且你的 css 文件显示的 body.loadingDiv ...
现在修复@Martin

【解决方案3】：

2018 年更新

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

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

【讨论】：

只是对'Update 2018'添加一点解释：mx-auto将左右边距设置为auto； d-block 设置 display:block

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我将justify-content-center 类用于容器内的一行。与 Bootstrap 4 配合得很好。

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

【讨论】：

【解决方案6】：

您可以使用以下内容。支持 Bootstrap 3.x 以上版本。

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

【讨论】：

谢谢。正是我今天所需要的。

【解决方案7】：

您可以在引导 img 类中使用 margin 属性。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案9】：

你应该使用

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

【讨论】：

【解决方案10】：

将“center-block”作为类添加到图像 - 不需要额外的 css

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

【讨论】：

不知道为什么 -1 - 这是迄今为止最好的答案！它使用构建到 Bootstrap 中的帮助类。
在 bootstrap 4 中，使用 mx-auto 而不是 center-block

【解决方案11】：

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

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

编辑

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

中都可用

【讨论】：

完美 - 完成了这项工作。但是假设我在图像下方有一个
因为 .row 在 twitter bootstrap 的核心类之一中。我建议在此页面上定义一个新类 twitter.github.com/bootstrap/index.html 与类刊头。
@Fixer <ul> 仍应居中对齐：jsfiddle.net/N74N7/1 必须有其他 CSS 代码影响它
花了超过 2 或 3 个小时，只有这一行...谢谢！

【解决方案12】：

我也需要，在这里我找到了解决方案：

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

【讨论】：

我认为引导人员需要将其添加到他们的 css 中
您好，谢谢！我现在正在使用 Bootstrap v3。我将此添加到我的 img 容器 div 中，因此我必须为我的 div 指定确切的宽度（至少）才能使事情正常工作。如果您没有容器或图像大小不同，请将此类添加到您的图像中。

【解决方案13】：

这样做的正确方法是

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

【讨论】：

在这个 -startbootstrap.com/round-about 上使用它时，这对我不起作用.. 但是在 <img> 元素中添加一个类 center-block 有效..
text-center 不适用于具有 img-responsive 类的图像，但上面的评论（关于 center-block）解决了这个问题
观察：在 Bootstrap v3.1.0 中，可以通过将 text-center 添加到列来将 img-responsive 在列中居中。此行为在 v3.3.4 中被破坏。很烦人。 CSS 很烂。
您应该使用 center-block 代替，如文档中所述：getbootstrap.com/css/#images-responsive

【解决方案14】：

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

【讨论】：

或者.text-center类？

【解决方案15】：

您可以将之前解决方案的 CSS 更改如下：

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

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

【讨论】：