2行目の画像を中心にすることはできません

Question

3つの画像からなる1つの行があります。必要に応じて等間隔に配置され、中央に表示されます。しかし、私は1つのイメージの行の下に行があり、それを最初の行の中央に揃えるように移動させることはできません。

margin:0 auto; width:90%のような私が見つけたすべての提案を試しましたが、2番目の行の画像は左揃えになっています。

誰かが間違いを指摘しますか？ここにはjsfiddleがあり、私が使用しているコードはここにあります。

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

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

だけ.nav-alignにjustify-content: centerを追加します。

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

Answer 2

クラスの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>