¿Cómo centro las pestañas de arranque de Twitter en la página?

Estoy usando twitter bootstrap para crear pestañas alternables. Aquí está el CSS que estoy usando:

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

Este html muestra las pestañas correctamente, pero tiradas hacia la izquierda (que es lo que se supone que debe suceder). Intenté jugar con el CSS para que las pestañas se centraran en la página, pero todavía no tuve suerte. Pensé que alguien con más experiencia en CSS sabría cómo hacer esto.

Como nota, hay otra pregunta sobre el centrado de las píldoras de navegación, que intenté, pero no funcionó solo con pestañas de navegación simples.

Gracias.

nav-tabsLos elementos de la lista flotan automáticamente a la izquierda por el bootstrap, por lo que debe restablecerlo y, en su lugar, mostrarlos como inline-block, y para centrar los elementos del menú, tenemos que agregar el atributo de text-align:centeral contenedor, así:

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

Demostración: http://jsfiddle.net/U8HGz/2/show/ Edite aquí: http://jsfiddle.net/U8HGz/2/

Editar: versión parcheada que funciona en IE7 + proporcionada por el usuario @My Head Hurts en los comentarios a continuación.

Demostración: http://jsfiddle.net/U8HGz/3/show/ Edite aquí: http://jsfiddle.net/U8HGz/3/

La respuesta aceptada es perfecta. Se puede personalizar aún más para que pueda usarlo junto con las pestañas alineadas a la izquierda estándar.

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

Para usarlo, agregue la clase "centrada" a su elemento de pestañas

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

Agregar la clase nav-justifiedfunciona para mí. Esto no solo alinea las pestañas en el centro, sino que también las extiende bien en la parte superior.

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

Aunque la respuesta aceptada funciona bien, encontré lo anterior más natural para Bootstrap.

Simplemente agregando

margin-left:50%;

cuando configuré mis pestañas, funcionó para mí.

Por ejemplo

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

Puede usar la cuadrícula de arranque para centrar sus pestañas de navegación. Dado que la cuadrícula de arranque se divide en 12 columnas iguales, puede usar fácilmente 4 columnas para su navegación con 4 columnas de desplazamiento:

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

Por lo tanto, obtiene su navegación en el medio de la página (también una solución receptiva) con 4 columnas libres en el lado izquierdo y derecho.

Encontré grid realmente útil para hacer páginas web receptivas. ¡Buena suerte!

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

si usa bs4 simplemente puede agregar una justify-content-centerclase a sus pestañas de navegación para centrarla en la página. si desea que sus pestañas estén justificadas (completas) agregue una nav-justifiedclase, en este caso, si tiene 3 elementos en su navegación, cada uno de ellos tiene un 33% con. si hay 5 ítems, cada uno tiene un 20% con.

otra forma es simplemente agregar text-centersi está usando bs3 .

‌Bootstrap en sí tiene una clase para este aspecto llamada nav-justified. Simplemente agréguelo así:

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

Si también desea alinear el contenido central de <li>, haga su disply: inline-block.

Prueba esto:

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