Làm cách nào để căn giữa các tab bootstrap của twitter trên trang?

Tôi đang sử dụng twitter bootstrap để tạo các tab có thể chuyển đổi. Đây là css tôi đang sử dụng:

<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 này hiển thị các tab một cách chính xác, nhưng bị kéo sang bên trái (đó là điều được cho là sẽ xảy ra). Tôi đã thử mày mò CSS để đưa các tab vào giữa trang, nhưng vẫn chưa gặp may. Tôi nghĩ ai đó có kinh nghiệm css hơn sẽ biết cách làm điều này.

Như một lưu ý, có một câu hỏi khác về việc căn giữa các viên thuốc điều hướng, tôi đã thử, nhưng nó không hoạt động với các tab điều hướng đơn giản.

Cảm ơn.

nav-tabscác mục danh sách được bootstrap tự động di chuyển sang bên trái, vì vậy bạn phải đặt lại điều đó và thay vào đó hiển thị chúng dưới dạng inline-block, và đối với các mục menu chính giữa, chúng tôi phải thêm thuộc tính của text-align:centervào vùng chứa, như vậy:

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/ Chỉnh sửa tại đây: http://jsfiddle.net/U8HGz/2/

Chỉnh sửa: phiên bản vá lỗi hoạt động trong IE7 + do người dùng @My Head cung cấp. Hãy bình luận bên dưới.

Demo: http://jsfiddle.net/U8HGz/3/show/ Chỉnh sửa tại đây: http://jsfiddle.net/U8HGz/3/

Câu trả lời được chấp nhận là hoàn hảo. Nó có thể được tùy chỉnh thêm để bạn có thể sử dụng nó song song với các tab căn trái tiêu chuẩn.

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

Để sử dụng nó, hãy thêm lớp "căn giữa" vào phần tử tab của bạn

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

Thêm lớp nav-justifiedlàm việc cho tôi. Điều này không chỉ căn giữa các tab mà còn trải rộng chúng một cách độc đáo ở trên cùng.

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

Mặc dù câu trả lời được chấp nhận hoạt động tốt, tôi thấy điều trên tự nhiên hơn với Bootstrap.

Chỉ cần thêm

margin-left:50%;

khi tôi thiết lập các tab của mình, đã làm việc cho tôi.

Ví dụ

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

Bạn chỉ có thể sử dụng lưới bootstrap để căn giữa các tab điều hướng của mình. Vì lưới bootstrap được chia trên 12 cột bằng nhau, bạn có thể dễ dàng sử dụng 4 cột cho điều hướng của mình với độ lệch 4 cột:

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

Do đó, bạn đang điều hướng ở giữa trang (cũng là giải pháp đáp ứng) với 4 cột trống ở bên trái và bên phải.

Tôi thấy lưới thực sự hữu ích để tạo các trang web đáp ứng. Chúc may mắn!

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

nếu bạn sử dụng bs4 đơn giản, bạn có thể thêm justify-content-centerlớp vào các tab điều hướng của mình để căn giữa nó trên trang. nếu bạn muốn các tab của mình hợp lý (đầy đủ), hãy thêm nav-justifiedlớp vào đó, trong trường hợp này nếu bạn có 3 mục trong điều hướng, mỗi tab trong số đó có 33% với. nếu có 5 mặt hàng thì mỗi mặt hàng có 20% với.

một cách khác đơn giản là thêm text-centernếu bạn đang sử dụng bs3 .

‌Bootstrap chính nó có một lớp cho vấn đề này được đặt tên nav-justified. Chỉ cần thêm nó như thế này:

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

Nếu bạn cũng muốn căn chỉnh nội dung chính giữa <li>, hãy tạo nội dung của nó disply: inline-block.

Thử đi:

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