CODEWITHSUNDEEP
htmlzurb-foundationzurb-foundation-5
Daniel Larsson
Daniel Larsson

Reputation: 6394

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

Upvotes: 0

Views: 203

Answers (1)

GuyH
GuyH

Reputation: 796

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).

Upvotes: 1

Related Questions