Jak wyśrodkować zakładki programu ładującego Twittera na stronie?

Używam programu bootstrap na Twitterze do tworzenia przełączalnych zakładek. Oto CSS, którego używam:

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

Ten kod HTML wyświetla poprawnie zakładki, ale pociągnął w lewo (co powinno się stać). Próbowałem majstrować przy CSS, aby wyśrodkować karty na stronie, ale na razie bez powodzenia. Pomyślałem, że ktoś z większym doświadczeniem w CSS będzie wiedział, jak to zrobić.

Uwaga: jest jeszcze jedno pytanie dotyczące centrowania pigułek nawigacyjnych, które wypróbowałem, ale nie zadziałało tylko z prostymi kartami nawigacyjnymi.

Dzięki.

nav-tabsElementy listy są automatycznie przenoszone w lewo przez bootstrap, więc musisz to zresetować i zamiast tego wyświetlać je jako inline-block, a aby wyśrodkować elementy menu, musimy dodać atrybut text-align:centerdo kontenera, na przykład:

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

Edycja: poprawiona wersja, która działa w IE7 +, dostarczona przez użytkownika @My Head Hurts down w komentarzach poniżej.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edytuj tutaj: http://jsfiddle.net/U8HGz/3/

Zaakceptowana odpowiedź jest idealna. Można go dodatkowo dostosować, aby można go było używać obok standardowych zakładek wyrównanych do lewej.

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

Aby z niej skorzystać, dodaj klasę „wyśrodkowaną” do elementu tabs

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

Dodanie klasy nav-justifieddziała dla mnie. Ten środek nie tylko wyrównuje zakładki, ale także ładnie je rozprowadza na górze.

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

Mimo że zaakceptowana odpowiedź działa dobrze, uważam, że powyższe jest bardziej naturalne dla Bootstrap.

Po prostu dodając

margin-left:50%;

kiedy założyłem moje karty, zadziałało dla mnie.

Np

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

Możesz po prostu użyć siatki bootstrap, aby wyśrodkować swoje karty nawigacyjne. Ponieważ siatka bootstrap jest podzielona na 12 równych kolumn, możesz łatwo użyć 4 kolumn do nawigacji z przesunięciem 4 kolumn:

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

Dzięki temu nawigacja znajduje się na środku strony (również rozwiązanie responsywne) z 4 kolumnami wolnymi po lewej i prawej stronie.

Siatka okazała się bardzo przydatna do tworzenia responsywnych stron internetowych. Powodzenia!

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

jeśli używasz bs4, możesz po prostu dodać justify-content-centerklasę do swoich zakładek nawigacyjnych, aby wyśrodkować ją na stronie. jeśli chcesz, aby Twoje tabulatory były wyjustowane (pełne) dodaj nav-justifieddo tego klasę, w tym przypadku, jeśli masz 3 elementy w swojej nawigacji, każdy z nich ma 33%. jeśli jest 5 pozycji, każdy ma 20% z.

Innym sposobem jest po prostu dodanie, text-centerjeśli używasz bs3 .

Bootstrap ma w tym względzie klasę o nazwie nav-justified. Po prostu dodaj to w ten sposób:

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

Jeśli chcesz wyrównać również zawartość środkową, ustaw <li>jej disply: inline-block.

Spróbuj tego:

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