ฉันจะวางแท็บ bootstrap ของ twitter ไว้ตรงกลางบนหน้าได้อย่างไร

ฉันใช้ twitter bootstrap เพื่อสร้างแท็บที่สลับได้ นี่คือ 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 ไว้ตรงกลางซึ่งฉันได้ลองใช้แล้ว แต่ไม่ได้ผลกับแท็บ nav ธรรมดาเท่านั้น

ขอบคุณ.

nav-tabsรายการจะลอยไปทางซ้ายโดยอัตโนมัติโดย bootstrap ดังนั้นคุณต้องรีเซ็ตและแสดงเป็น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;
}

Demo: http://jsfiddle.net/U8HGz/2/show/ แก้ไขที่นี่: http://jsfiddle.net/U8HGz/2/

แก้ไข: แก้ไขเวอร์ชันที่ใช้งานได้ใน IE7 + โดยผู้ใช้ @My Head Hurts ในความคิดเห็นด้านล่าง

การสาธิต: 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;
}

หากต้องการใช้ให้เพิ่มคลาส "กึ่งกลาง" ในองค์ประกอบแท็บของคุณ

<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%;">

คุณสามารถใช้ตาราง bootstrapเพื่อจัดกึ่งกลางแท็บนำทางของคุณ เนื่องจากตาราง bootstrap ถูกแบ่งออกเป็น 12 คอลัมน์เท่ากับคุณสามารถใช้ 4 คอลัมน์สำหรับการนำทางของคุณได้อย่างง่ายดายโดยมี 4 คอลัมน์ออฟเซ็ต:

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

ดังนั้นคุณจะได้รับการนำทางที่ตรงกลางของหน้า (รวมถึงโซลูชันที่ตอบสนองด้วย) โดยมี 4 คอลัมน์ฟรีทางด้านซ้ายและด้านขวา

ฉันพบว่ากริดมีประโยชน์มากสำหรับการสร้างหน้าเว็บที่ตอบสนอง โชคดี!

<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-justifiedคลาสเข้าไปในกรณีนี้หากคุณมี 3 รายการในการนำทางแต่ละรายการจะมี 33% ด้วย หากมี 5 รายการแต่ละรายการมี 20% ด้วย

อีกวิธีหนึ่งก็คือการเพิ่มtext-centerถ้าคุณใช้bs3

nav-justifiedบูตตัวเองมีชั้นเรียนสำหรับเรื่องนี้ชื่อ เพียงแค่เพิ่มสิ่งนี้:

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

หากคุณต้องการจัดแนวเนื้อหาตรงกลาง<li>ด้วยให้สร้างdisply: inline-blockไฟล์.

ลองสิ่งนี้:

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