Zurb Foundation, horizontally centering 10 columns in a 12-column grid

Question

Creation Wizards

Difficult time trying to center an element with 10 columns in the default column grid.

EDIT: fill in the code a bit

I tried to put 1 columns on both sides 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 this 3x5 grid in the exact center of the page. 1 columns do not currently fill 10 columns in the center.

Answer 1

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

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

And if you want to center the contents of the large-10 section, you can add the text-center class, which is included in F4:

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

Also, be sure to wrap the column divs in a row div , otherwise the column divs classes will not work. See this script for an example.

Answer 2

Are you trying to center text in a column or center a div on a page (equal margins on both sides)?

If you are just trying to center the div (and not its contents), this works:

  <div class="row"> <div class="columns one"></div> <div class="columns ten"> test </div> <div class="columns one"></div> </div>