图像未与引导行的中心对齐答案

【问题标题】：Images not aligning to center of a bootstrap row图像未与引导行的中心对齐
【发布时间】：2017-06-16 06:18:47
【问题描述】：

我刚开始学习编码，并且一直试图让我的图像在引导行上居中。我已经尝试将中心块 div 应用于将它们居中的每个图像，但垂直一个接一个。我将 center-block 应用于不执行任何操作的行，并且我还在该行之前和之后创建了 div 以测试它是否有效，但它没有。我试过 text-align: center;在所有不同的 div 上也没有运气。

<div class="row">
 <img class="col-xs-3 col-md-1 img-responsive" src="img1.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img2.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img3.png">
</div>

.center-block {
  float: none;
}

【问题讨论】：

您使用的是引导程序 3 还是引导程序 4？
使用 3。对不起，忘了提。如果重要的话，该行也位于容器和 jumbotron 内。
如果你使用的是 bootstrap 4，你可以使用像这样的帮助类 codepen.io/anon/pen/KqNyGg
您也可以使用 bootstrap3 和自定义类执行相同的技术。我不确定使用 bootstrap3 的“引导”方式。你想让我写一些可以与 bootstrap3 一起使用的自定义 css 吗？
那将非常有帮助。我会研究你的代码，并尝试理解我在未来哪里出了问题。

标签： html css twitter-bootstrap

【解决方案1】：

这里有一些您可以应用到 bootstrap3 的自定义 CSS，它们将模仿您可以与 bootstrap4 一起使用的内置 flexbox 类。只需创建包含 display: flex 列的行并使用 justify-content: center 将列水平居中。

.flex-row {
  display: flex;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row text-center flex-row">
    <div class="col-xs-3 col-md-1">
      <img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png">
    </div>
    <div class="col-xs-3 col-md-1">
      <img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png">
    </div>
    <div class="col-xs-3 col-md-1">
      <img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png">
    </div>
  </div>
</div>

【讨论】：

这很好用，但不幸的是我不知道为什么，因为我以前从未遇到过 flex。你知道为什么我之前尝试的所有方法都不起作用吗？
bootstrap 3 使用float 创建它的列。而且您不能使用text-align: center 将浮动元素居中，因为这只适用于inline/inline-block 元素，而浮动元素是block。而.center-block 和float: none 只会生成图像display: block; margin: auto;，这将破坏列，因为它们不再浮动。
@learningtowebdev 这是 flexbox 上的一个很好的资源css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案2】：

您可以使用这种简单的方法将它们集中在行或另一个 div 内。

HTML

<div class="row">
 <img class="col-xs-3 col-md-1 img-responsive" src="img1.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img2.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img3.png">
</div>

CSS

.row{
 display: block;
 text-align: center;
}

.row img{
 display: inline-block;
}

【讨论】：

【解决方案3】：

我不确定我是否理解问题，但希望它有用。 xD 如果你想在整个页面中居中你的 .row - 使用 col-xs-4 （因为引导程序使用 12 列，如果你有 3 个块，那么 12/3 = 4（对于每个 div）。

如果您知道，对不起。当我使用 text-align: center to div 时，一切正常。

是的，bootstrap 使用float: left，但那是在col-*-* 元素上，但是当你写.col-*-* {text-align: center} 时，你定位的不是那个div，而是这个div 里面的所有东西。

真的希望有些东西有用。 :)

【讨论】：

我使用 col-xs-3 col-md-1 因为我希望图像非常小。我试过 text-align: center;在 col-- div 上，但它不起作用。如果您想看一下，这是我正在从事的 FCC 项目的代码笔：codepen.io/Zed20/pen/PjNmer
如果你想要图像更小，只需添加 css: img {width: 75%} 例如。对于居中行，您需要使用 col-xs-4 或 col-offset-*。这是我在工作中一直意识到的解决方案，我们只使用它来集中多个元素。 ;)