html - 试图在 zurb 基础中居中嵌套列

Question

我正在使用 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>

谢谢！

Answer 1

可能4是不正确的，你应该尝试four十二点。

Answer 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>