如何居中对齐 jQuery UI 选项卡 - 带有屏幕截图答案

【问题标题】：How to center-align jQuery UI tabs - with screenshot如何居中对齐 jQuery UI 选项卡 - 带有屏幕截图
【发布时间】：2012-05-12 07:18:54
【问题描述】：

请问有人知道如何将jQuery UI tabs 中的标签居中对齐吗？

（默认情况下它们是左对齐的，我在文档中找不到对齐选项）

这里是a page，我用它来对一些图表进行分组，当前代码很简单：

$('#chart_tabs').tabs();

更新： CSS 代码：

.ui-tabs .ui-tabs-nav {
        text-align: center;
}

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

Didier 建议（感谢）已将选项卡居中对齐，但也在选项卡“按钮”下方放置了一些奇怪的间隙：

【问题讨论】：

标签： jquery-ui jquery-ui-tabs

【解决方案1】：

这个片段帮助我回到过去..

.centered .ui-tabs-nav {
    height: 2.35em;
    text-align: center;
}
.centered .ui-tabs-nav li {
    display: inline-block;
    float: none;
    margin: 0em;
}

也许这也适合你

【讨论】：

这对我有用，谢谢！在我指定 <div id="chart_tabs" class="centered">....</div> 之后

【解决方案2】：

最简单的方法是在容器（UL 元素）上应用text-align: center 并取消浮动LI：

.ui-tabs .ui-tabs-nav {
    text-align: center;
}

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

【讨论】：

谢谢，但这在我尝试过的所有浏览器上增加了一个奇怪的差距（请参阅上面的更新问题）......知道为什么吗？

【解决方案3】：

这对我有用，避免了你提到的差距（在标签下面）：

.ui-tabs-nav {
  float: none; text-align: center;  
}

.ui-tabs-nav li {
  display: inline-block; float: none;  
}

.ui-tabs-nav li a {
  float: none;
}

【讨论】：

【解决方案4】：

.ui-tabs .ui-tabs-nav {
  text-align: center;
}

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

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -8px;
}

.ui-tabs .ui-tabs-nav li {
  margin: 1px .2em -7px 0;
}

【讨论】：

【解决方案5】：

现代另一种不错的方法：

.ui-tabs .ui-tabs-nav {
    display: flex;
    justify-content: center;
}

【讨论】：