Question

我有一排三张图片。它们根据需要显示相等的间距和居中。但是后来我在一个图像的下方有一行，我无法让它移动到第一行的居中对齐。

我已经尝试了所有可以找到的建议，例如path = r'E:\Hack Things\python\amazonlogo'，但第二行中的图片保持左对齐。

有人请指出我的错误吗？这是jsfiddle，这是我正在使用的代码。

margin:0 auto; width:90%

.banner_set {
  width: 100%;
  overflow: hidden
}

.nav-align {
  display: -webkit-flex;
  display: flex;
  -webkit-reorder-direction: row-reverse;
  width: 100%;
  height: auto;
  list-style: none;
}

.nav-items {
  /* width: 33%; */
  margin: 24px;
  flex: 1;
  /* NEW */
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5)
}

.nav-items-wide {
  width: 100% margin: 0px;
}

Answer 1

为类nav-align添加justify-content: space-around;或justify-content: center;。

.banner_set {
  width: 100%;
  overflow: hidden
}

.nav-align {
  display: -webkit-flex;
  display: flex;
  -webkit-reorder-direction: row-reverse;
  width: 100%;
  height: auto;
  list-style: none;
  justify-content: space-around;
}

.nav-items {
  /* width: 33%; */
  margin: 24px;
  flex: 1;
  /* NEW */
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5)
}

.nav-items-wide {
  width: 100% margin: 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="banner_set">
  <ul class="nav navbar-nav nav-align">
    <li class="nav-items">
      <a href="http://www.example.com/b1">
        <img src="http://www.exampe.com/images/img1.jpg" class="img-responsive" width="80" height="40"></a>
    </li>
    <li class="nav-items">
      <a href="http://www.example.com/b2">
        <img src="images/img2.jpg" class="img-responsive" width="80" height="40"></a>
    </li>
    <li class="nav-items">
      <a href="http://www.example.com/b3">
        <img src="http://www.exampe.com/images/img3.jpg" class="img-responsive" width="80" height="40">
    </li>
  </ul>
</div>

<div class="banner_set">
  <ul class="nav navbar-nav nav-align">
    <li class="nav-items-wide">
      <a href="http://www.example.com/b4">
        <img src="http://www.exampe.com/images/img4.jpg" class="img-responsive" width="125" height="40"></a>
    </li>
  </ul>
</div>

Answer 2

只需将justify-content: center添加到.nav-align。

https://jsfiddle.net/60yqwufm/1/

无法将图像居中放在第二行

2 个答案: