html-lists – Zurb Foundation的中心列表

使用Zurb的Foundation 4时,我无法集中内联列表.

‘text-center’和’centered’的预构建css类适用于其他元素,但不适用于列表.

对older question有关图像的回顾具有类似的结果.

这不起作用：

<div class="row">
      <div class="large-12 columns text-center">
        <ul class="inline-list">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
          <li><a href="#">Five</a></li>
        </ul>
      </div>
    </div>

但是,删除它确实有效(但显然不是首选标记)：

<div class="row">
      <div class="large-12 columns text-center">
          <a href="#">One</a>
          <a href="#">Two</a>
          <a href="#">Three</a>
          <a href="#">Four</a>
          <a href="#">Five</a>
      </div>
    </div>

您是否有关于此样式如何影响列表的建议？

谢谢.

解决方法

我认为这就像在CSS文件中添加以下内容一样简单：

.inline-list{
     display: table;
     margin: 0 auto;
}

您还可以从列div中删除文本中心类.我创建了一个codepen,http://cdpn.io/rwJjf,作为一个例子.我在我的例子中使用了Foundation 5.0.3,但我认为这不重要.

以下是我使用的资源：

> Centering List Items Horizontally (Slightly Trickier Than You Might Think)
> display
> The display declaration

我希望有所帮助.