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

Question

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/

Leave a Comment Cancel reply