將Foundation 4 Grid中的網格塊居中

Question

我目前正在與Zurb-Foundation 4合作，我在嘗試在（小）大12行中設置一個居中的Block-Grid時遇到了問題。

這是我的代碼：

<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

在你的ul元素中添加一個display: inline-block ，然后將你的li元素的width:98px;改為width:98px; 。

這是一個jsFiddle顯示它在行動。