保持未知数量的div居中，每行最多4个

Question

我有一个简单的问题，但我无法自己解决。

简而言之：我必须在页面中定位未知数量元素，最多每行4个元素，但仍然居中。这张图片给你一个提示（我为此举了例子）：

详细：在上图中，我介绍了不同的场景。因此，例如，如果总共有5个元素，则应使用第一行和最后一行（4 + 1个圆圈）。如果有10个项目，那么第一行的两倍和第三行的一次（4 + 4 + 2个圈子）......你明白了。这些元素（图像和名称在现实生活中是不同的）以特定顺序从数据库表中检索。

从数学的角度来看，我认为有一种模式，因此它可以通过php中的函数来解决。由于我正在使用Zurb Foundation 5作为前端，我可以期待有一个简单的解决方案......块网格可能？！这是第一行的代码（4个圆圈）：

<div class="row" id="circle4">
    <div class="small-3 large-2 large-offset-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">electrocasnice</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">cosmetice</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">mobilier</h2>
    </div>
    <div class="small-3 large-2 columns text-center">
        <div class="grow pic"><img src="http://lorempixel.com/400/400" /></div><h2 class="round_h2">parfumuri</h2>
    </div>
    <div class="small-3 large-2 columns text-center"></div>
</div>

其他情况（每行3/2/1圈）基本相同，稍微改变偏移量。我也可以浮动元素，给父母一个固定的宽度，但这是不可能的，因为它是一个响应式设计。

无论如何，我怎样才能从PHP或Foundation实现这一目标？

提前致谢。

更新：这是示例的小提琴，所以你可以更好地理解

jsfiddle

Answer 1

给出宽度和宽度text-align to your .row div

.row{
    display:block;
    max-width:1000px;
    text-align:center;
    margin:0 auto;
}

然后制作圆圈内联块元素

.small-3{
    display:inline-block;
    width:200px;
    margin:0 25px 25px;
}

.row div的宽度应等于4 cirlce的结果宽度。在上面的例子中它是1000，因为（200 + 25 + 25）* 4 = 1000.在这里使用你的宽度。

Answer 2

你必须用圆圈设置div的宽度，使它们成为内嵌块并使父div居中。

#circle4 {
    text-align: center;
}

#circle4 > div {
    display: inline-block;
    width: 240px;
    height: 240px;

    /**
     * Update
     */
    float: left;
}

#circle4 > div:nth-of-type(4n) {
    clear: right;
}

Answer 3

为了最多保留一行中的4个项目，你必须给它们一个％宽度，所以只有4个元素可以像这样适合：

CSS：

#circle4{
    text-align: center;
}

.small-3{
    display:inline-block;
    width:23%;
}

您不能在一行中容纳更多4 23％宽度的项目，因为：

4*23 = 92%

适合100％和

5 * 23 = 115% 

不适合100％

---

如果你想更进一步让你的div（图像）的内容响应，你应该添加这个 CSS：

.grow img{
    width:100%;
    height:auto;
}

<强> DEMO