Twitter Bootstrap: Center Pills

Question

My question is how you can center the pills?

I\'ve tried to add center block around and also to change the float:left to float:center but n

Answer 1

If you'd like variable width pills in a variable width container, I'd suggest using the inline-block display type and adding a class to the pill container.

Here is how I extended bootstrap for centering pills.

CSS:

.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */

HTML:

  

    

      
derek
      
brooks
      
is
      
super
      
awesome