html - 图像未与 Bootstrap 行的中心对齐

Question

我刚开始学习编码，一直试图让我的图像在 Bootstrap 行上居中。我已经尝试将中心 block 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;
}

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