html - Zurb Foundation，在 12 列网格中水平居中 10 列

Question

基础奇才，

在尝试将 10 列元素置于默认的 12 列网格中时遇到困难。

编辑:多填写一些代码

我尝试在两边各放 1 列，但无济于事:

<div class="row">

<div class="large-1 column"><p></div>

<div class="large-10 columns">
<div class="row>five large-2 columns in here</div>
<div class="row>five large-2 columns in here</div>
<div class="row>five large-2 columns in here</div>
</div>

<div class="large-1 column"><p></div>

</div>

我的目标是让 3x5 网格位于页面的正中央。第 1 列当前没有将第 10 列填充到中心。

Answer 1

根据您的需要，通过包含 large-centered 类或 small-centered 来使 div 居中:

<div class="large-10 large-centered columns">
    five 2 columns in here
</div>

如果您想将 large-10 div 的内容居中，您可以添加包含在 F4 中的 text-center 类:

<div class="large-10 large-centered columns text-center">
    five 2 columns in here
</div>

此外，不要忘记将 column div 包装在 row div 中，否则 columns 类将无法工作。 See this fiddle举个例子。