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

Answers


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.


Need Your Help

Schedule a Task in Vista - System Restart

scheduled-tasks windows-vista

I am trying to write a system restart Task for Windows Vista. I'm a web developer by trade so I'm a little out of my element here. I have got into my OS and discovered Task Scheduler.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.