/ /グリッドブロックを基盤4グリッドに配置 - html、css、sass、zurb-foundation

Foundation 4グリッドのグリッドブロックを中心にする - HTML、CSS、Sass、zurb-foundation

私は現在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

回答:

回答№1は4

追加する display: inline-block あなたの ul 要素の幅を変更します li 要素を width:98px;.

ここでは、 jsFiddle それを実際に示している。