Q:

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

I'm using twitter bootstrap to create togglable tabs.  Here is the css I'm using:
<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>

This html displays the tabs correctly, but pulled to the left (which is what is supposed to happen).  I've tried tinkering with the CSS to get the tabs to center on the page, but no luck yet.  I thought someone with more css experience would know how to do this.
As a note, there is another question about centering nav pills, which I tried, but it didn't work with just plain nav tabs.
Thanks.

A:

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/

A:

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>

A:

Adding the class nav-justified works for me. This not only center aligns the tabs but it also spreads them nicely at the top.
<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>

Even though the accepted answer works well, I found the above more natural to Bootstrap.

