Question

我最近继承了一些（杂乱的）代码并希望将两行图像居中，每行包含三个图像。我一直想弄清楚为什么我不能让他们集中。

这是我的HTML

    <div class="top1">
        <div class="container" style="background-color:#fff; padding-top:10%; padding-bottom:400px; padding-top:15px; padding-left:30px; padding-right:30px;">
            <div class="row">
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/1.jpg" width="100%" height="auto" />
                </div>
                <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
                    <img style="position: relative;" class="img-responsive" src="images/2.jpg" width="100%" height="auto" style="margin-top:5%;" /> <!--width="220px" height="240px"-->
                </div>
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/3.jpg" width="100%" height="auto" />
                </div>
            </div>
            <div class="row" style="padding-top: 50px;">
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/4.jpg" width="100%" height="auto" style="margin-top:5%;" />
                </div>
                <div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
                    <img style="position: relative;" class="img-responsive" src="images/5.jpg" width="100%" height="auto" />
                </div>
                <div class="col-md-2 col-xs-12 inspire_others">
                    <img style="position: relative;" class="img-responsive" src="images/6.jpg" width="100%" height="auto" style="margin-top:5%;" />
                </div>
            </div>
        <br />
        </div>
    </div>

我正在使用bootstrap。

Answer 1

我清理了您的代码，您需要col-md-4而不是col-md-2，因为默认情况下，bootstrap有12列，因此12/3为4.并在margin:auto中添加img因为引导程序中的img已经display:block

，所以居中图像

[class^="col"] {
  border: green 1px solid
}
img {
  margin: auto
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="top1">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-xs-12 inspire_others">
        <img class="img-responsive" src="//dummyimage.com/200x200" />
      </div>
      <div class="col-md-4 col-xs-12 inspire_others">
        <img class="img-responsive" src="//dummyimage.com/200x200" />
        <!--width="220px" height="240px"-->
      </div>
      <div class="col-md-4 col-xs-12 inspire_others">
        <img class="img-responsive" src="//dummyimage.com/200x200" />
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-xs-12 inspire_others">
        <img class="img-responsive" src="//dummyimage.com/200x200" />
      </div>
      <div class="col-md-4 col-xs-12 inspire_others">
        <img class="img-responsive" src="//dummyimage.com/200x200" />
      </div>
      <div class="col-md-4 col-xs-12 inspire_others">
        <img class="img-responsive" src="//dummyimage.com/200x200" />
      </div>
    </div>
    <br />
  </div>
</div>

Answer 2

好消息！实际上有一种非常简单的方法可以使图像居中。

tldr; - 只需在＆lt; style＆gt;中添加以下代码即可标记：

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

长篇故事
它将你的.row div变成了一个flexbox（更多信息在这里：http://www.w3schools.com/css/css3_flexbox.asp）。
justify-content属性将所有div放在.row（以及div中的图像）中。

居中两行图像

2 个答案: