Center group of columns in Foundation

Is there a way to center a group of uneven number of columns in a row in Foundation? Due to the unevenness, I don't see how this can be achieved with the offset option provided, since the offset would have to be a non-integer.

The image below explains what I'm trying to achieve. 6 single-column divs in total, where 5 of them are centered in the entire row, leaving an offset of 2.5 columns to the first column.

enter image description here

Solution

This solution is slightly unorthodox in Foundation terms, but your design requires an unorthodox solution.

First give the row a right padding of half a column's width in the CSS; 1 column = 8.3333% width, so this padding should be 4.1666%.

Next give the first column a right margin also of 4.1666%.

Now give the second column an offset of 2 columns, and you should be there (the last column will also need class end to make it left justify up against the previous column).

<div class="column first-column">...</div>
<div class="column large-1 large-offset-2">...</div>
...[other columns]...
<div class="column end">...</div>

.row { padding-right: 4.1666%; }
.first-column { margin-right: 4.1666%; !important}

You might possibly need !important on these unusual margins and paddings one (I can't remember offhand) to override Foundations setting of margin:0 on columns - try !important if these paddings and margins don't work without it). (NB: I am working from Foundation 5 basis, I didn't use the earlier versions).