Keep unknown number of divs centered, max 4 per row

Question

I have a simple problem, yet I can't figure it out by myself. In short: there are an unknown number of elements which I have to position in the page, max. 4 elements per row, yet still centered. This image gives you a hint (I've set it up for the sake of example): Detailed: On the image above I covered the different scenarios. So for example if there would be 5 elements total, the first and the last row should be used (4 + 1 circles). If there would be 10 items, then two times the first row and once the third (4 + 4 + 2 circles)... You get the idea. The elements (images and names are different in real-life) are retrieved from a database table in a specific order. From a mathematical point of view, there is a pattern I think, thus it could be solved from a function in php. Since I am using Zurb Foundation 5 for the front-end, which I'm new at, one might expect that there is an easy solution using... the block grid maybe?! Here is the code for the first row (4 circles): ```

Accepted Answer

Give width & text-align to your `.row` div

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

Then make your circles inline block elements

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

Width of .row div should be equal to resulting width of 4 cirlce. In above example it is 1000 since (200 + 25 + 25)*4 = 1000. Use your width here.

Keep unknown number of divs centered, max 4 per row

Solution

Problem