jquery-ui - jQuery UI タブを中央揃えにする方法 - スクリーンショット付き

Question

jQuery UI tabsでタブを中央揃えにする方法を知っている人はいますか?

(デフォルトでは左揃えで、ドキュメントに配置オプションが見つかりません)

これは、いくつかのチャートをグループ化するために使用するページです。現在のコードは単純です。

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

更新: CSS コード:

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

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

ディディエによって提案された（ありがとう）タブを中央揃えにしましたが、タブ「ボタン」の下に奇妙なギャップを置きました：

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