居中对齐容器和左对齐子元素 [英] Center align container and left align child elements

问题描述

我有X个图像（所有相同的高度和宽度），我想在网页上显示它们。但是，我想让页面在调整浏览器大小时自动显示一行上的最大图片数量（不调整图片大小）。

I've got X number of images (all the same height and width), and I want to display them on a web page. But I want to make the page automatically display the maximum number of images on a row (without resizing the images) when the browser is resized, and to show the images a fixed distance apart.

此外，图片应该在页面中央分组，并一个接一个显示。

Also the images should be grouped together in the centre of the page, and displayed one after the other.

例如
当浏览器窗口宽度足够在一行上显示3个图像时，应显示如下。

e.g. When the browser window is only wide enough to display 3 images on a row, they should be displayed as follows.

每行3张图片，在页面中央相隔一定距离分组，一个接一个。

3 images per row grouped together a fixed distance apart, in the centre of the page, one after the other.

如果浏览器更宽，可以在一行上显示4张图片，显示如此。

And if the browser is made wider so 4 images can be displayed on a row they should be displayed like so.

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

4 images per row (without resizing the images), grouped together a fixed distance apart, in the centre of the page, one after the other.

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

So far I've written the following code:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

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填充div div），然后它在外div中居中。

So the images are displayed inline with a 10px padding inside a div (inner-div) which is then centred inside the outer-div. And the images are text-aligned to the left inside the inner-div.

但问题是它们显示如下：

But the problem is they are displayed as follows:

当浏览器变宽时如下所示

And like follows when the browser is made wider

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

Can someone please show me how to display the images like the first set of images?

推荐答案

据我所知，没有一个简单的方法来实现布局与纯CSS。以下方法使用媒体查询来为不同视口大小设置内部div的宽度。

There isn't an easy way to achieve the layout with plain CSS as far as I know. The following approach uses media queries to set the width of inner divs for different viewport sizes.

如果您有大量项目，请考虑使用Javascript，CSS预处理器可能

Consider to use Javascript if you have a rather large number of items, CSS preprocessors might be helpful too.

查看代码段和内嵌代码，还可以查看 jsfiddle example ，以方便测试。

See code snippet and comments inline, also check out the jsfiddle example for easy testing.

body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}

<div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div>

这篇关于居中对齐容器和左对齐子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！