Come si centra le schede di bootstrap di Twitter sulla pagina?

Question

Sto usando twitter bootstrap per creare schede modificabili. Qui è il css che sto utilizzando:

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

Questo html visualizza le schede correttamente, ma tirato a sinistra (che è quello che dovrebbe succedere). Ho provato ad armeggiare con il CSS per mettere le schede al centro della pagina, ma ancora nessuna fortuna. Ho pensato che qualcuno con più esperienza css sapesse come fare questo.

Come nota, c'è un'altra domanda sul centraggio delle pillole nav, che ho provato, ma non ha funzionato con semplici schede di navigazione.

Grazie.

Answer 1

nav-tabs voci di elenco sono galleggiare automaticamente a sinistra dal bootstrap quindi bisogna resettare che invece li mostrano come inline-block, e al centro di voci di menu dobbiamo aggiungere l'attributo di text-align:center al contenitore, in questo modo:

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

---

Modifica: versione con patch che funziona in IE7 + fornita dall'utente @ La mia testa fa male nei commenti qui sotto.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edit qui: http://jsfiddle.net/U8HGz/3/

Answer 2

La semplice aggiunta di

margin-left:50%; 

quando ho creato le mie schede, ha lavorato per me.

Ad es.

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

Answer 3

risposta accettata è perfetto. Può essere ulteriormente personalizzato in modo da poterlo utilizzare parallelamente alle schede standard allineate a sinistra.

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

Per usarlo, aggiungere "centrato" classe per il vostro elemento schede

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

Answer 4

Si può semplicemente utilizzare bootstrap grid per centrare i vostri nav-tabs. Poiché la griglia di bootstrap è divisa su 12 colonne uguali, puoi facilmente utilizzare 4 colonne per la navigazione con 4 colonne sfalsate:

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

Quindi stai navigando nel mezzo della pagina (anche una soluzione reattiva) con 4 colonne libere a sinistra e a destra.

Ho trovato la griglia molto utile per creare pagine Web reattive. Buona fortuna!

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

opere giustificate dal nav per me ..Questo non solo centra le schede ma le diffonde anche in alto. in questo modo:

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

Anche se la risposta accettata funziona bene, ho trovato quanto sopra più naturale per il bootstrap