如何使块体基础6居中？

【问题标题】：How to center block body foundation 6?如何使块体基础6居中？
【发布时间】：2018-01-16 12:46:21
【问题描述】：

我创建了一个 base.html 页面以扩展到我的其他页面，但是无论我尝试什么，我都无法将内容居中在 {% block body %} 有人能看出问题出在哪里吗？我正在使用基础 6，并且没有在 app.css 中编辑任何内容。如果您需要更多信息，请告诉我。

{% block body %}

<div class="row">
    <div class="large-3 large columns"></div>
        <div class="large-6 large-centered columns">

            <h1>CONTENT FROM OTHER PAGES</h1>
            <p>Here is some content.</p>

        </div>
<div class="large-3 large columns"></div>
</div>

{% endblock %}

【问题讨论】：

标签： html django python-2.7 zurb-foundation-6

【解决方案1】：

如果您使用的是 Foundation 6，那么我建议您转储浮动和弹性网格并开始使用 xy 网格，它已经带有帮助类来完成您想要做的事情。

{% block body %}
<div class="grid-container">
    <div class="grid-x align-center">
            <div class="shrink cell">

                <h1>CONTENT FROM OTHER PAGES</h1>
                <p>Here is some content.</p>

            </div>
    </div>
</div>

{% endblock %}

确保您在容器中有一个使用收缩的单元格（收缩迫使单元格使用尽可能少的空间），因此所有内容都居中，而 div.grid-x.align-center 将完成其余的工作（它将使容器内的所有单元格居中，从而有效地创建一个居中的单元格）。

还有很多事情要做，只要确保你使用最新的基金会编译（至少使用基础 6.4.1 非常重要）

【讨论】：