Wie zentriere ich die Twitter-Bootstrap-Registerkarten auf der Seite?

Ich verwende Twitter-Bootstrap, um umschaltbare Registerkarten zu erstellen. Hier ist das CSS, das ich benutze:

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

Dieses HTML zeigt die Registerkarten korrekt an, wird jedoch nach links gezogen (was eigentlich passieren soll). Ich habe versucht, mit dem CSS zu basteln, damit die Registerkarten auf der Seite zentriert werden, aber noch kein Glück. Ich dachte, jemand mit mehr CSS-Erfahrung würde wissen, wie man das macht.

Als Hinweis gibt es noch eine andere Frage zum Zentrieren von Navigationspillen, die ich ausprobiert habe, die jedoch nicht nur mit einfachen Navigationsregistern funktioniert hat.

Vielen Dank.

nav-tabsListenelemente werden vom Bootstrap automatisch nach links verschoben, sodass Sie diese zurücksetzen und stattdessen als anzeigen müssen. inline-blockUm Menüelemente zu zentrieren text-align:center, müssen Sie dem Container das Attribut hinzufügen , wie folgt:

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

Bearbeiten: gepatchte Version, die in IE7 + funktioniert, bereitgestellt von Benutzer @My Head Hurts down in den Kommentaren unten.

Demo: http://jsfiddle.net/U8HGz/3/show/ Hier bearbeiten: http://jsfiddle.net/U8HGz/3/

Akzeptierte Antwort ist perfekt. Es kann weiter angepasst werden, sodass Sie es neben den standardmäßigen linksbündigen Registerkarten verwenden können.

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

Um es zu verwenden, fügen Sie Ihrem Registerkartenelement eine "zentrierte" Klasse hinzu

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

Das Hinzufügen der Klasse nav-justifiedfunktioniert für mich. Diese Mitte richtet die Registerkarten nicht nur aus, sondern verteilt sie auch gut oben.

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

Obwohl die akzeptierte Antwort gut funktioniert, fand ich das Obige für Bootstrap natürlicher.

Einfach hinzufügen

margin-left:50%;

Als ich meine Tabs einrichtete, arbeitete ich für mich.

Zum Beispiel

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

Sie können einfach das Bootstrap-Raster verwenden, um Ihre Navigationsregisterkarten zu zentrieren. Da das Bootstrap-Raster in 12 gleiche Spalten unterteilt ist, können Sie für Ihre Navigation problemlos 4 Spalten mit einem Versatz von 4 Spalten verwenden:

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

Daher erhalten Sie Ihre Navigation in der Mitte der Seite (auch reaktionsschnelle Lösung) mit 4 freien Spalten auf der linken und rechten Seite.

Ich fand Grid wirklich nützlich, um reaktionsschnelle Webseiten zu erstellen. Viel Glück!

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

Wenn Sie bs4 verwenden , können Sie justify-content-centerIhren Navigationsregistern einfach eine Klasse hinzufügen , um sie auf der Seite zu zentrieren . Wenn Sie möchten, dass Ihre Registerkarten gerechtfertigt sind (voll mit), fügen Sie hinzunav-justified Klasse hinzu. In diesem Fall, wenn Sie 3 Elemente in Ihrem Navigationssystem haben, hat jedes von ihnen 33% mit. Wenn 5 Artikel vorhanden sind, hat jeder 20% mit.

Eine andere Möglichkeit besteht darin, einfach hinzuzufügen, text-centerwenn Sie bs3 verwenden .

‌Bootstrap selbst hat diesbezüglich eine Klasse namens nav-justified. Fügen Sie es einfach so hinzu:

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

Wenn Sie auch den Inhalt des Zentrums ausrichten möchten <li>, machen Sie es disply: inline-block.

Versuche dies:

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