在屏幕中间对齐 Foundation 5 选项卡

我正在尝试对齐 Foundation 5 附带的开箱即用选项卡。出于某种原因，默认情况下它们是向左对齐的，我不知道如何让它们与屏幕中心对齐。我正在使用的代码相当简单（沼泽标准选项卡标记）

Example:

<ul class="tabs" data-tab>
    <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
    <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
</ul>

<div class="tabs-content">
    <div class="content active" id="panel2-1">
        <p>First panel content goes here...</p>
    </div>
    <div class="content" id="panel2-2">
        <p>Second panel content goes here...</p>
    </div>
</div>

现场演示：

http://jsfiddle.net/7YxLg/ http://jsfiddle.net/7YxLg/

那么我的目标是让两个选项卡位于屏幕中间居中而不是位于左侧，这可以做到吗？

我通过以下 SCSS 将选项卡置于中心并与基础配合良好：

ul.tabs {
    text-align: center;
    li {
        float: none !important;
        display: inline-block;
    }
}

如果您使用纯 CSS：

ul.tabs {
    text-align: center;
}

ul.tabs li {
    float: none !important;
    display: inline-block;
}

好处：您不需要指定宽度，这可能会导致响应问题。您也不需要额外的 div。该解决方案也特定于基础。

解释：一般情况下，添加text-align: center; ul 的 css 会将 li 元素居中。但是，foundation 的默认 css 将 float: left 添加到 ul.tabs 中的 li 中。我们使用 float: none !important 清除此问题，并重新对齐内联块中的 li 元素。