html 容器左对齐,html – 居中对齐容器和左对齐子元素

我有X个图像(所有相同的高度和宽度)，我想在网页上显示它们。但是我想让页面自动显示一行的最大数量的图像(不调整图像大小)，当浏览器调整大小，并以固定的距离显示图像。

另外，图像应该被一起分组在页面的中心，并且一个接一个地显示。

例如

当浏览器窗口仅足够宽以在一行上显示3个图像时，它们应该显示如下。

每行3个图像分组在一起固定的距离，在页面的中心，一个接一个。

如果浏览器更宽，所以4个图像可以显示在一行，他们应该这样显示。

每行4张图像(不调整图像大小)，在页面中央相隔一定距离分组，一个接一个。

到目前为止我写了以下代码：

HTML

CSS

img {

height: 200px;

width: 200px;

padding: 10px;

}

.image-div {

display: inline;

}

.outer-div {

text-align: center;

width: 100%;

}

.inner-div {

text-align: left;

display: inline;

}

因此，图像在内部显示一个10px padding在div(内部div)，然后在外部div的中心。并且图像在内部div的左边是文本对齐的。

但问题是他们显示如下：

当浏览器变得更宽时，类似如下

有人可以告诉我如何显示图像像第一组图像？

即每行的最大图像数(不调整图像大小)，一个接一个，在页面中心分组在一起，固定的距离(包装)。