CODEWITHSUNDEEP
htmlcsssasszurb-foundation
casarock
casarock

Reputation: 212

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

Upvotes: 1

Views: 4451

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62881

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.

Upvotes: 4

Related Questions