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

Question

基金会巫师，

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

编辑：填写代码多一点

我尝试在两侧放置 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-10div 的内容居中，可以添加text-centerF4 中包含的类：

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

另外，不要忘记将你的包装column divs在 a 中row div，否则这些columns类将无法工作。以这个小提琴为例。

Answer 2

您是想将列中的文本居中还是将 div 居中在页面上（两边的边距相等）？

如果您只是想将 div （而不是其内容）居中，则此方法有效：

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