Question

我刚开始学习编码，并且一直试图让我的图像以引导行为中心。我已经尝试将中心块div应用于每个以中心为中心的图像，但是一个接一个地垂直。我将中心块应用到没有做任何事情的行，我还在行之前和之后创建了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>

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

Answer 3

我不确定我是否理解了问题，但希望它会有用。的xD 如果你想将你的.row放在所有页面的中心 - 使用col-xs-4（因为bootstrap使用12列，如果你有3个块，那么12/3 = 4（每个div））。

如果你知道，抱歉。当我使用text-align：center to div时，一切正常。

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

真的希望有些东西是有用的。：）

图像未对齐到引导行的中心

3 个答案: