如何居中块体基础 6？

Question

我创建了一个 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 %}

Answer 1

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

{% 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 %}

确保您有一个单元格在容器内使用收缩（收缩会强制单元格使用尽可能少的 space），因此所有内容都居中并且 div.grid-x.align-center 将完成剩下的工作（它将容器内的所有单元格居中，有效地创建一个居中的单元格）。

还有很多事情要做，只要确保使用最新的 FOUNDATION 编译（至少使用 foundation 6.4.1 非常重要）

如何居中块体基础 6？

How to center block body foundation 6?

html

django

python-2.7

zurb-foundation-6