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

Question

我正在尝试对齐 Foundation 5 附带的开箱即用选项卡。出于某种原因，默认情况下它们向左对齐，我无法弄清楚如何让它们与屏幕中心对齐。我正在使用的代码非常简单(沼泽标准标签标记)

示例:

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

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

Answer 1

我通过以下 SCSS 使选项卡居中并与 foundation 配合得很好:

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 到 li 的 ul.tabs 里面。我们用 float: none !important 清除它，并重新对齐行内 block 中的 li 元素。