ページのTwitterブートストラップタブを中央に配置するにはどうすればよいですか？

Twitterブートストラップを使用して、切り替え可能なタブを作成しています。これが私が使っているCSSです：

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

このhtmlはタブを正しく表示しますが、左側に引っ張られます（これが起こるはずです）。CSSをいじってタブをページの中央に配置しようとしましたが、まだうまくいきません。私は、CSSの経験が豊富な方なら、これを行う方法を知っていると思いました。

メモとして、ナビピルの中央揃えについて別の質問がありますが、試してみましたが、単純なナビタブだけでは機能しませんでした。

ありがとう。

nav-tabsリスト項目はブートストラップによって自動的に左にフロートされるため、それをリセットして代わりにとして表示する必要がありinline-block、メニュー項目を中央に配置text-align:centerするには、次のようにの属性をコンテナに追加する必要があります。

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

デモ：http : //jsfiddle.net/U8HGz/2/show/ ここで編集：http : //jsfiddle.net/U8HGz/2/

編集：ユーザーが提供するIE7 +で動作するパッチバージョン。

デモ：http : //jsfiddle.net/U8HGz/3/show/ ここで編集：http : //jsfiddle.net/U8HGz/3/

受け入れられた答えは完璧です。さらにカスタマイズして、標準の左揃えのタブと並べて使用できます。

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

これを使用するには、「centered」クラスをタブ要素に追加します

<ul class="nav nav-tabs centered" >
..
</ul>

クラスを追加するとnav-justifiedうまくいきます。これは、タブを中央に揃えるだけでなく、上部にうまく広げます。

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

受け入れられた答えはうまく機能しますが、上記の方がBootstrapの方が自然であることがわかりました。

単に追加する

margin-left:50%;

タブを設定したとき、私のために働きました。

例えば

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

あなたはブートストラップグリッドを使うことができますを、ナビゲーションタブを中央に配置ます。ブートストラップグリッドは12の等しい列に分割されているため、4列のオフセットでナビゲーションに4列を簡単に使用できます。

<div class="col-sm-4 col-sm-offset-4">。

したがって、ページの中央（レスポンシブソリューション）でナビゲーションを取得し、左側と右側に4列の空きがあります。

グリッドは、レスポンシブWebページを作成するのに非常に役立つことがわかりました。幸運を！

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>

bs4を使用する場合はjustify-content-center、nav-tabsにクラスを追加して、ページの中央に配置できます。あなたのタブを正当化したい場合（完全に）追加nav-justifiedクラスをます。この場合、ナビゲーションに3つのアイテムがあり、それぞれに33％あります。5つのアイテムがある場合、各アイテムの20％は

別の方法は、bs3text-centerを使用している場合に単に追加することです。

‌Bootstrap自体には、この名前のクラスがありnav-justifiedます。次のように追加するだけです。

<ul class="nav nav-tabs nav-justified">

の中央のコンテンツも揃えたい場合は<li>、にしdisply: inline-blockます。

これを試して：

<ul class="nav nav-tabs justify-content-center">