Css ZURB基金会打折后打折

以下是html.erb页面：

<div class="tabs-content">
  <div class="content active" id="panel1">
    <h2>Day 2</h2>
    <p>Welcome back!!</p>
  </div>
  <div class="content" id="panel2">
    <p>A <strong>commitment</strong> is when you promise to do something!</p>
  </div>
  <div class="content" id="panel3">
    <p>You have to verify you kept your commitment! You can verifiy by checking in to a location or having a friend act as your referee.</p>
  </div>
  <div class="content" id="panel4">
    <p>Be sure to fulfill your commitment!</p>
  </div>
</div>
<div class="row">
  <div class="small-8 columns small-centered">
    <dl class="tabs" data-tab>
      <div class="small-12 columns small-centered">
        <dd class="active"><a href="#panel1"> </a></dd>
        <dd><a href="#panel2"> </a></dd>
        <dd><a href="#panel3"> </a></dd>
        <dd><a href="#panel4"> </a></dd>
      </div>
    </dl>
  </div>
</div>

这是否与父元素和子元素的交互方式有关？我敢肯定，当我开始将dd元素放入div时，它就停止工作了

但这些点需要居中。有更好的方法吗

---

<>我检查了基础文档，但没有发现有用的东西。

从我了解到的，你正试图在列中居中。默认情况下，基础增加了<强>浮点：左边；到元素

只需将以下内容添加到.tabs ddCSS中即可

.tabs dd {
        margin: 5px;
        border-radius:50%;
        float: none;
        display: inline-block;
}

工作示例：

.tabs dd {
        margin: 5px;
        border-radius:50%;
        float: none;
        display: inline-block;
}