试图在 zurb 基础中居中嵌套列答案

【问题标题】：Trying to center a nested column in zurb foundation试图在 zurb 基础中居中嵌套列
【发布时间】：2014-09-15 19:58:12
【问题描述】：

我正在使用 Zurb 基础，我正在尝试将嵌套列居中，但由于某种原因，我无法理解，它没有居中。请问有人能解释一下吗？！

<div class="container"> 
    <div class="row">
        <div class="12 columns">
            <div class="row">
                <div class="4 centered columns">
                    <h1>My Content</h1>
                </div>
            </div>
        </div>
    </div>
</div>

谢谢！

【问题讨论】：

哈！在这里回答了我自己的问题，原来我写的是数字而不是列数的单词。真是个混蛋！

标签： html css grid responsive-design zurb-foundation

【解决方案1】：

可能是4 不正确，您应该尝试four 和十二个相同。

【讨论】：

【解决方案2】：

如果您使用的是 Foundation 3，请尝试

<div class="container">
  <div class="row">
    <div class="12 columns">
      <div class="row">
        <div class="4 centered columns">
          <h1>My Content</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我发现结束 <div> 标记不平衡。

如果您使用的是 Foundation 4，请使用

<div class="container">
  <div class="row">
    <div class="large-12 columns">
      <div class="row">
        <div class="large-4 large-centered columns">
          <h1>My Content</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：