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

Question

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

现有代码工作正常，但当图像重新对齐为 2 列时，它们向左对齐，在#container 的右侧留下难看的空间。

我将如何动态增加图像之间的间隙，使图像仍然在 #container 上拉伸(stretch)，从而保持 #container 内的所有内容水平对称？谁能帮我解决这个问题。

我尝试了一些明显的候选者(例如 #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:

#container {
  width: 70%;
  margin: 0 auto;
  background-color: gray;
  }

Answer 1

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

#gallery{ text-align: center;}