html - 在 Foundation 的全宽行中居中内容

Question

有谁知道如何使用 Zurb 的 Foundation 将内容居中放置在全宽行上？

我目前有:

HTML

    <div class="row full-width nav-back">

        <div class="row large-12 column">

        <!-- CONTENT -->

        </div>

    </div>

CSS

.nav-back{
height:80px;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #004B91),
color-stop(1, #002952));
background-image: -o-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -moz-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -webkit-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -ms-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: linear-gradient(to bottom, #004B91 0%, #002952 100%);

这使得“large-12 column”div 内的内容拉伸(stretch) 100% 与父容器“全宽”相同

有什么办法可以让“large-12 column”中包含的内容居中吗？

谢谢:-)

Answer 1

您是否尝试过删除嵌套列容器中的行？

<div class="row full-width nav-back">
  <div class="large-12 columns"><!-- CONTENT --></div>
</div>

也可能是 .full-width 负责 100% 的行。通常该行有一个最大宽度，当超过时它会居中您的内容。在基础文档中，它的 max-width: 80rem;。所以你可以试试不用全 Angular 。

<div class="row nav-back">
  <div class="large-12 columns"><!-- CONTENT --></div>
</div>

使用 .large-centered，您还可以在一行中将较小的列居中，因为 12 列(large-12、medium-12 等)通常是 100%。

<div class="row full-width nav-back">
  <div class="large-10 large-centered columns"><!-- CONTENT --></div>
</div>