html - 在 Foundation 4 网格中将网格块居中

Question

我目前正在使用 Zurb-Foundation 4，并且在尝试在（小）大 12 行中设置居中的块网格时遇到了问题。

这是我的代码：

<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>

我总是得到一个左对齐的 3x3 网格。我只想让这个网格以大 12 行为中心。我不得不提一下，我的 li 元素具有固定的宽度和固定的高度。

这是否可以在大 12 行中使用网格块？

更新：我创建了一个小的 jsbin 示例：http: //jsbin.com/EwOZ/1

Answer 1

将 a 添加display: inline-block到您的ul元素，然后将元素的宽度更改li为width:98px;.

这是一个jsFiddle展示它的实际效果。