在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伸展部分中的内容与父容器的”全宽“100%相同。

有没有办法将包含在"large-12 column“中的内容居中？

谢谢:-)

Answer 1

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

在foundation中记录了它的max-width: 80rem;。因此，您可以尝试不使用全角。

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

使用.Large居中也可以将较小的列居中，因为12列(large-12、medium-12等)通常是100%。

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