Zurb Foundation中的居中列表 [英] Centering lists in Zurb Foundation

问题描述

在使用Zurb的Foundation 4时，我无法使内联列表居中.

I am having trouble centering inline lists when using Zurb's Foundation 4.

'text-center'和'centered'的预构建css类可用于其他元素，但不适用于列表.

The prebuilt css classes of 'text-center' and 'centered' work fine for other elements but not with lists.

对与图像有关的旧问题的评论具有相似的结果

A review of an older question concerning images has similar results.

这不起作用:

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

但是，当删除此标记时确实有效(但显然不是首选标记):

However, when removing the this does work (but obviously is not preferred markup):

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

您对这种样式如何影响列表有建议吗?

Do you have a suggestion on how lists can be affected by this style.

谢谢.

推荐答案

我认为这很简单，只需将以下内容添加到CSS文件中即可:

I think it is as simple as adding the following to your CSS file:

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

您还可以从列div中删除text-center类.我创建了一个代码笔，例如 http://cdpn.io/rwJjf .我在示例中使用的是Foundation 5.0.3，但我认为这无关紧要.

You can also remove the text-center class from your column div. I created a codepen, http://cdpn.io/rwJjf, as an example. I used Foundation 5.0.3 in my example, but I don't think it will matter.

以下是我使用的资源:

• 将列表项水平居中(比您想的要棘手)
• 显示
• 显示声明

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

我希望能帮上忙.

这篇关于Zurb Foundation中的居中列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！