Menu icon Foundation
Positioning <div> in center that occupies less than 12 columns.

I'm having trouble positioning <div elements in the center that are of less than 12 columns in size.

All such div s start from the left most column and would move to the center even if I write

"margin-left:auto;
margin-right:auto;" 


            

         

to position them in the center.

How do I solve this?

positioncenterfoundation5divcolumnspositioning

I'm having trouble positioning <div elements in the center that are of less than 12 columns in size.

All such div s start from the left most column and would move to the center even if I write

"margin-left:auto;
margin-right:auto;" 


            

         

to position them in the center.

How do I solve this?

Rafi Benkual over 4 years ago

Foundation has classes for this. You can center one set of columns per line and specify media queries.

Like 'small-centered' and 'large-uncentered'

http://foundation.zurb.com/docs/components/grid.html#centered-columns

Jacob Brooks over 4 years ago

Rafi is correct in his answer I just wanted to add that centering divs is easy but dont forget to pay attention to both Small and Large codes ex:

<div class="small-6 small-centered large-8 large-centered columns"> 

will have your div centered on both Small and Large breakpoints. If you use the code Rafi explained:

<div class="small-6 small-centered large-8 large-uncentered columns">

Your div will be centered on mobile but not on larger screens. The center property works independently for Small and Large.

Hope that helps!