Center a grid-block in a Foundation 4 Grid
I am currently working with Zurb-Foundation 4 and I've faced a problem while trying to have a centered Block-Grid in a (small)large-12 Row.
Here is my code:
<div class="row" id="boardcontainer"> <div class="small-12 large-12 large-centered columns"> <ul class="small-block-grid-3 large-block-grid-3 text-center" id="board"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> </div>
I always get a left aligned 3x3 grid. I just want to have this grid centered in a large-12 row. I have to mention, that my li-elements are given a fixed width and fixed height.
Is this possible using the grid-block within a large-12 row?
Update: I've created a small jsbin example: http://jsbin.com/EwOZ/1
Add a display: inline-block to your ul element, then change the width of your li elements to width:98px;.
Here's a jsFiddle showing it in action.