css-根据容器宽度调整间隙或图像大小

我正在尝试创建一个简单的响应图像库，默认列数为3。随着窗口宽度变小，列的数量也应该减少（首先是2，最后是1）

现有的代码可以正常工作，但是当图像重新对齐为有两列时，它们就会向左对齐，在容器的右侧留下一个丑陋的空间

如何动态地增加图像之间的间距，使图像仍然在容器中拉伸，使容器中的所有内容保持水平对称？谁能帮我一下吗

我尝试过几个明显的候选人（例如#gallery img{align:center}），但没有一个成功

解决方案/提示可以是css/sass和/或js

<div id="container">
  <header><h1>My Gallery</h1></header>
  <div id="filter"></div>
  <div id="gallery">
        <img src="http://lorempixel.com/400/200/" alt="Gal" />
        <img src="http://lorempixel.com/400/200/" alt="Gal" />
        <img src="http://lorempixel.com/400/200/" alt="ggg" />
        <img src="http://lorempixel.com/400/200/" alt="gog" />
        <img src="http://lorempixel.com/400/200/" alt="Gallery" />
        <img src="http://lorempixel.com/400/200/" alt="Gallery" />
</div> <!-- end of gallery-->
</div> <!-- end of container -->

---

只需将此代码添加到CSS部分

#gallery{ text-align: center;}

---

只需将此代码添加到CSS部分

#gallery{ text-align: center;}

Html:

测试

Html:

---

测试

很好。我不知道文本对齐适用于图像-效果很好。很高兴帮助您：）很好。我不知道文本对齐适用于图像-效果很好。很高兴帮助您：）谢谢。有趣的是，它只是减少了图像的大小，而没有将它们重新流到2列，然后是1列。上面的内容在小屏幕上不太有用，因为你会看到一行3个非常小的图像，而不是1个正常大小的图像。只需使用：@media（最小宽度：*px）{-}谢谢。有趣的是，它只是减少了图像的大小，而没有将它们重新流到2列，然后是1列。上述内容在小屏幕上不太有用，因为您会看到一行3个非常小的图像，而不是1个正常大小的图像

  <div id="container">
      <header><h1>My Gallery</h1></header>
      <div id="filter"></div>
      <ul id="gallery">
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
    </ul> <!-- end of gallery-->
    </div> <!-- end of container -->

    #container {
      width: 70%;
      margin: 0 auto;
      background-color: gray;
      }
    #gallery{
      width:100%;
      list-style:none;
      clear:both;
       margin:0;
       padding:0;
    }
#gallery:before,
#gallery:after{
    content: " ";
    display: table;
    clear: both;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    #gallery li{
       margin:0;
       width:23.3333%;
       height:auto;
       display:block;
       float:left;
    }
    #gallery li img{
       display:block;
       margin: 0 auto;
       width:100%;
       max-width:100%;
    }