Come posso centrare le schede bootstrap di Twitter sulla pagina?

Sto usando il bootstrap di Twitter per creare schede attivabili. Ecco il css che sto 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>

Questo html mostra le schede correttamente, ma viene spostato a sinistra (che è ciò che dovrebbe accadere). Ho provato ad armeggiare con il CSS per centrare le schede sulla pagina, ma ancora senza fortuna. Ho pensato che qualcuno con più esperienza CSS avrebbe saputo come farlo.

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

Grazie.

nav-tabsgli elementi dell'elenco vengono automaticamente spostati a sinistra dal bootstrap, quindi devi reimpostarlo e visualizzarli invece come inline-block, e per centrare gli elementi del menu dobbiamo aggiungere l'attributo di text-align:centeral 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/ Modifica qui: http://jsfiddle.net/U8HGz/2/

Modifica: versione con patch che funziona in IE7 + fornita dall'utente @My Head Hurts down nei commenti qui sotto.

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

La risposta accettata è perfetta. Può essere ulteriormente personalizzato in modo da poterlo utilizzare fianco a fianco con le linguette 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, aggiungi la classe "centrata" all'elemento tabs

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

L'aggiunta della classe nav-justifiedfunziona per me. Questo non solo al centro allinea le linguette, ma le diffonde bene anche in alto.

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

Semplicemente aggiungendo

margin-left:50%;

quando ho impostato le mie schede, ha funzionato per me.

Per es

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

Puoi semplicemente usare la griglia di bootstrap per centrare le tue schede di navigazione. Poiché la griglia di bootstrap è divisa su 12 colonne uguali, puoi facilmente utilizzare 4 colonne per la tua navigazione con un offset di 4 colonne:

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

Quindi stai ottenendo la tua navigazione al centro della pagina (anche soluzione responsive) con 4 colonne libere a sinistra ea destra.

Ho trovato la griglia davvero utile per creare pagine web reattive. In bocca al lupo!

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

se usi bs4 semplicemente puoi aggiungere una justify-content-centerclasse alle tue schede di navigazione per centrarla sulla pagina. se vuoi che le tue schede siano giustificate (complete di) aggiungi nav-justifiedclasse ad essa, in questo caso se hai 3 elementi nel tuo navigatore ognuno di essi ha il 33% con. se 5 elementi sono presenti, ognuno ha il 20% di.

un altro modo è semplicemente aggiungere text-centerse stai usando bs3 .

‌Bootstrap stesso ha una classe a questo proposito chiamata nav-justified. Aggiungilo semplicemente in questo modo:

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

Se vuoi allineare anche il contenuto centrale <li>, crea il suo disply: inline-block.

Prova questo:

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