How do I center the twitter bootstrap tabs on the page?

Question

I\'m using twitter bootstrap to create togglable tabs. Here is the css I\'m using:

  

    &         


        
                      

              相关标签:
       
      

Answer 1

You can just use bootstrap grid to center your nav-tabs. Since bootstrap grid is divided on 12 equals columns, you can easily use 4 columns for your navigation with 4 columns offset:

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

Therefore your are getting your navigation in the middle of the page (also responsive solution) with 4 columns free on the left and the right side.

I found grid really useful for making responsive web pages. Good luck!

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

Answer 2

Try This:

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

Answer 3

nav-tabs list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

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 here: http://jsfiddle.net/U8HGz/2/

---

Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edit here: http://jsfiddle.net/U8HGz/3/

Answer 4

Accepted answer is perfect. It can be further customized so that you can use it side by side with the standard left aligned tabs.

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

To use it, add "centered" class to your tabs element

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

Answer 5

Simply adding

margin-left:50%;

when I set up my tabs, worked for me.

For e.g.

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

Answer 6

‌Bootstrap itself has a class for this regard named nav-justified. Simply add it like this:

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

If you want to align center content of <li> as well, make its disply: inline-block.