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

Question

有人知道如何在jQuery UI 选项卡中居中对齐选项卡吗？

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

这是一个页面，我用它来分组一些图表，当前代码很简单：

$('#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（谢谢）建议已将选项卡居中对齐，但也在选项卡“按钮”下方放置了一些奇怪的间隙：

Answer 1

这个剪断帮助我回到过去..

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

也许这也适合你

Answer 2

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

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

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

Answer 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;
} 

Answer 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;
}

Answer 5

现代另一种不错的方法：

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