html - 如何在响应式网页设计中将除最后一行缩略图之外的所有缩略图居中？

Question

当我开始在 stackoverflow 上发帖时，我从没想过我会问一个关于简单 HTML 布局的问题，但这是我今天的一小部分。

在这个 fiddle 中:

http://jsfiddle.net/cheolsoo/zd5fupje/

.main {text-align:center}

无论页面宽度如何，缩略图都居中，这是我想要的，但最后一行(不完整的)缩略图也居中，这是我不想要的。我希望最后一行与其他行向左齐平，右侧有空格。

在这个 fiddle 中:

http://jsfiddle.net/cheolsoo/330z8bw1/

最后一行与其他行向左齐平，右边有空格，这是我想要的，但整批缩略图都稍微偏左一点，这取决于窗口宽度，这是我不想要的。

那么，我怎样才能让整批缩略图完美居中，而底行与其余部分齐平呢？我说“SIMPLY”全大写是因为丑陋、复杂的解决方案(1)针对不同的屏幕宽度使用一堆媒体查询，以及(2)使用 JavaScript 将 n 个虚拟缩略图放在行的末尾，其中 n =我想到了(缩略图总数)%(一行中的缩略图数量)，但这些解决方案既丑陋又复杂。

缩略图的数量会有所不同，但我知道。我也知道缩略图的宽度。 (它们的大小都一样。)

一定有一些我可以使用的 CSS 是我没有想到的......

Answer 1

Flexbox 可以解决你的问题，没有 JS，只有 CSS3

在 codepen 上查看结果:http://codepen.io/anon/pen/kFmdJ

HTML:

<ul class="flex-container">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS:

ul.flex-container {
    width: 60%;
    padding: 0;
    margin: 0 auto;
    list-style: none;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: flex-start;

ul.flex-container li {
    background: tomato;
    padding: 5px;
    margin: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;

    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

您可以在此处查看完整教程:http://css-tricks.com/snippets/css/a-guide-to-flexbox/