html - metas - twitter title

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

Question

Estoy usando twitter bootstrap para crear pestañas desactivables. 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 hacia la izquierda (que es lo que se supone que debe suceder). Intenté retocar el CSS para que las pestañas se centraran en la página, pero aún no tuve suerte. Pensé que alguien con más experiencia CSS sabría cómo hacer esto.

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

Gracias.

Answer 1

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

.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, agrega la clase "centrada" a tu elemento de pestañas

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

Answer 2

Puedes simplemente usar la red de arranque para centrar tus pestañas de navegación. Como la cuadrícula de bootstrap se divide en 12 columnas iguales, puede usar fácilmente 4 columnas para su navegación con desplazamiento de 4 columnas:

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

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

Encontré la grilla 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>

Answer 3

Simplemente agregando

margin-left:50%;

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

Por ej.

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

Answer 4

nav-justified funciona para mí. Esto no solo centra las pestañas, sino que también las extiende muy bien en la parte superior. al igual que:

<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é que lo anterior es más natural para el arranque

Answer 5

nav-tabs elementos de la lista de nav-tabs flotan automáticamente hacia la izquierda con el programa de arranque, por lo que debe restablecerlos y mostrarlos como inline-block , y para centrar los elementos del menú, debemos agregar el atributo de text-align:center al contenedor, al igual que:

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

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

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