Question

我试图对齐带有基础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让标签居中并与基础玩得很好：

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元素居中。但是，基础的默认css在ul.tabs中添加了float：left到li的内部。我们用float：none！important来清除它，并在内联块中重新排列li元素。

Answer 2

当然，使用自动边距的魔力。

计算出元素的总宽度，然后将该数字包装在div中。

CSS：

#tabsDiv
{
    width:250px;
    margin:0 auto;
}

然后在HTML中，将所有代码放入该div。

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

2 个答案: