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 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 divs包裹在row div中，否则columns类将无效。 See this fiddle为例。

Answer 2

您是尝试将文字置于列中心还是将页面居中放在页面上（两边的边距相等）？

如果你只是想把div（而不是它的内容）集中在一起，那就行了：

            <div class="row">
                <div class="columns one"></div>
                <div class="columns ten">
                    test
                </div>
                <div class="columns one"></div>
            </div>

Zurb Foundation，在12列网格中水平对中10列

2 个答案: