html - 第一行 3 个图像，然后第二行下面 2 个图像

Question

我想在第一行有 3 张图片，在第二行有 2 张图片。我有这段代码，但上面有 2 个，底部有 3 个。

<ul>
  <li><img src="./icons/User_Management.png" /></li>
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>
</ul>

* { box-sizing: border-box; }
    ul { 
      list-style: none; 
      font-size: 0; 
      margin: 0; 
      padding: 0; 
      text-align: center; }

    li { display: inline-block; padding: 10px;}

    li:nth-child(1), li:nth-child(4) {
      width: 50%;
    }
    li:nth-child(4) { text-align: right; }
    li:nth-child(2) { text-align: left; }

我希望底部的两张图片与顶部的三张图片居中。

预期结果 - 第一行 3 个图像，第二行 2 个实际结果 - 第一行 2 个图像，第二行 3 个图像

Answer 1

使用 Flex:

#container{
  width: 550px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#container > img{
  margin: 10px;
}

<div id="container">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
</div>