在 Foundation 的全宽行中居中内容答案

【问题标题】：Centering content within a full width row in Foundation在 Foundation 的全宽行中居中内容
【发布时间】：2014-04-03 19:51:30
【问题描述】：

有谁知道如何使用 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%);

}

这使得“大 12 列”div 内的内容拉伸 100% 与父容器“全宽”相同

有没有办法让“大12列”中包含的内容居中？

谢谢:-)

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

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

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

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

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

使用 .large-centered 您还可以将较小的列居中，因为 12 列（大 12、中 12 等）通常是 100%。

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

【讨论】：