Bagaimana cara memusatkan tab bootstrap twitter pada halaman?

Saya menggunakan bootstrap twitter untuk membuat tab yang dapat diubah. Ini css yang saya gunakan:

<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 ini menampilkan tab dengan benar, tetapi ditarik ke kiri (yang seharusnya terjadi). Saya telah mencoba mengutak-atik CSS untuk membuat tab berada di tengah halaman, tetapi belum berhasil. Saya pikir seseorang dengan lebih banyak pengalaman css akan tahu bagaimana melakukan ini.

Sebagai catatan, ada pertanyaan lain tentang pil navigasi tengah, yang saya coba, tetapi tidak berhasil hanya dengan tab navigasi biasa.

Terima kasih.

nav-tabsitem daftar secara otomatis diapungkan ke kiri oleh bootstrap sehingga Anda harus meresetnya dan sebagai gantinya menampilkannya sebagai inline-block, dan untuk item menu tengah kita harus menambahkan atribut text-align:centerke wadah, seperti:

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

Demo: http://jsfiddle.net/U8HGz/2/show/ Edit di sini: http://jsfiddle.net/U8HGz/2/

Sunting: versi patch yang bekerja di IE7 + disediakan oleh pengguna @My Head Hurts di komentar di bawah.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edit di sini: http://jsfiddle.net/U8HGz/3/

Jawaban yang diterima sempurna. Ini dapat disesuaikan lebih lanjut sehingga Anda dapat menggunakannya berdampingan dengan tab rata kiri standar.

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

Untuk menggunakannya, tambahkan kelas "terpusat" ke elemen tab Anda

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

Menambahkan kelas nav-justifiedberhasil untuk saya. Ini tidak hanya meratakan tengah tab tetapi juga menyebarkannya dengan baik di atas.

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

Meskipun jawaban yang diterima berfungsi dengan baik, saya menemukan jawaban di atas lebih alami untuk Bootstrap.

Cukup menambahkan

margin-left:50%;

saat saya menyiapkan tab, berfungsi untuk saya.

Misalnya

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

Anda cukup menggunakan kisi bootstrap untuk memusatkan tab navigasi Anda. Karena kisi bootstrap dibagi menjadi 12 sama dengan kolom, Anda dapat dengan mudah menggunakan 4 kolom untuk navigasi Anda dengan 4 kolom offset:

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

Oleh karena itu Anda mendapatkan navigasi Anda di tengah halaman (juga solusi responsif) dengan 4 kolom gratis di sisi kiri dan kanan.

Saya menemukan grid sangat berguna untuk membuat halaman web yang responsif. Semoga berhasil!

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

jika Anda menggunakan bs4 cukup Anda dapat menambahkan justify-content-centerkelas ke tab navigasi Anda untuk memusatkannya di halaman. jika Anda ingin tab Anda diratakan (full-with) tambahkan nav-justifiedkelas ke dalamnya, dalam hal ini jika Anda memiliki 3 item di nav Anda masing-masing memiliki 33% dengan. jika 5 item ada masing-masing memiliki 20% dengan.

cara lain adalah dengan menambahkan text-centerjika Anda menggunakan bs3 .

‌Bootstrap sendiri memiliki kelas untuk hal ini bernama nav-justified. Cukup tambahkan seperti ini:

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

Jika Anda ingin menyelaraskan konten tengah <li>juga, buatlah disply: inline-block.

Coba ini:

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