相关疑难解决方法(0)

我希望flex项目居中,但是当我们有第二行时,将5(从下面的图像)下调到1并且不在父项中居中.

这是我的一个例子:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

我有一堆相同大小的块设置display:inline-block在div内部,text-align:center设置为对齐块.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

这些块水平填充div,随着浏览器窗口缩小,一些块会断开到新行,从而创建更多行和更少列.我希望所有内容仍然保持居中,最后一行与左边齐平,如下所示: …

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

此外,图像应在页面中央组合在一起,并一个接一个地显示.

例如,当浏览器窗口宽度足以在一行上显示3个图像时,它们应显示如下.

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

如果浏览器变得更宽,那么可以在一行上显示4个图像,它们应该像这样显示.

每行4个图像(不调整图像大小),在页面中心一个接一个地分开固定距离.

到目前为止,我已经编写了以下代码:

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;
}

因此,图像以div(inner-div)内部的10px填充内联显示,然后在outer-div内居中.并且图像在内部div内部与文本对齐.

但问题是它们显示如下:

当浏览器变宽时,如下所示

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

即每行的最大图像数(不调整图像大小),一个接一个地在页面中心组合在一起,固定距离(包裹).