如何使jQuery UI选项卡居中对齐 - 使用屏幕截图

Question

有人请知道如何对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（感谢）提出的建议将标签中心对齐，但也在标签下方留下了一些奇怪的空白 - “按钮”：

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