Zurb Foundation, horizontally centering a 10 column in the 12 column grid

Question

Foundation wizards,

Having a difficult time trying to center a 10-column element in the default 12 column grid.

EDIT: filled out the code a bit more

I tried putting 1 columns on either side to no avail:

<div class="row">

<div class="large-1 column"><p></div>

<div class="large-10 columns">
<div class="row>five large-2 columns in here</div>
<div class="row>five large-2 columns in here</div>
<div class="row>five large-2 columns in here</div>
</div>

<div class="large-1 column"><p></div>

</div>

My goal is to have that 3x5 grid in the exact center of the page. The 1 columns are currently not padding the 10 column to the center.

Answer 1

Center the div by including the large-centered class, or small-centered depending on your needs:

<div class="large-10 large-centered columns">
    five 2 columns in here
</div>

And if you want to center the content of the large-10 div you can add the text-center class that is included in F4:

<div class="large-10 large-centered columns text-center">
    five 2 columns in here
</div>

Also, don't forget to wrap your column divs in a row div or else the columns classes will not work. See this fiddle as an example.