Twitter önyükleme sekmelerini sayfada nasıl ortalayabilirim?

Değiştirilebilir sekmeler oluşturmak için twitter bootstrap kullanıyorum. İşte kullandığım css:

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

Bu html, sekmeleri doğru bir şekilde görüntüler, ancak sola doğru çekilir (olması gereken budur). Sekmeleri sayfada ortalamak için CSS ile uğraşmayı denedim, ancak henüz şans yok. Daha fazla CSS tecrübesi olan birinin bunu nasıl yapacağını bileceğini düşündüm.

Not olarak, gezinti haplarını ortalamakla ilgili başka bir soru var, denedim ama bu sadece düz gezinme sekmeleriyle çalışmadı.

Teşekkürler.

nav-tabsliste öğeleri otomatik olarak önyükleme tarafından sola kaydırılır, bu nedenle onu sıfırlamanız ve bunun yerine bunları olarak görüntülemeniz gerekir inline-blockve menü öğelerini ortalamak text-align:centeriçin kapsayıcıya özniteliğini eklememiz gerekir , örneğin:

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/ Burada düzenleyin : http://jsfiddle.net/U8HGz/2/

Düzenleme: Aşağıdaki yorumlarda @ My Head Hurts down kullanıcı tarafından sağlanan IE7 + 'da çalışan yamalı sürüm.

Demo: http://jsfiddle.net/U8HGz/3/show/ Burada düzenleyin : http://jsfiddle.net/U8HGz/3/

Kabul edilen cevap mükemmel. Standart sola hizalanmış sekmelerle yan yana kullanabilmeniz için daha da özelleştirilebilir.

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

Bunu kullanmak için sekmelerinize "ortalanmış" sınıf ekleyin

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

Sınıfı eklemek nav-justifiedbenim için çalışıyor. Bu sadece sekmeleri ortalamakla kalmaz, aynı zamanda üstte güzel bir şekilde yayar.

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

Kabul edilen cevap iyi çalışsa da, yukarıdakileri Bootstrap için daha doğal buldum.

Basitçe eklemek

margin-left:50%;

sekmelerimi oluşturduğumda benim için çalıştı.

Örneğin

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

Gezinti sekmelerinizi ortalamak için sadece önyükleme ızgarasını kullanabilirsiniz . Önyükleme ızgarası 12 eşit sütuna bölündüğünden, gezinmeniz için 4 sütun ofsetiyle kolayca 4 sütunu kullanabilirsiniz:

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

Bu nedenle, gezinmenizi sayfanın ortasında (aynı zamanda duyarlı çözüm) sol ve sağ tarafta 4 sütun ücretsiz olarak alıyorsunuz.

Duyarlı web sayfaları yapmak için ızgarayı gerçekten yararlı buldum. İyi şanslar!

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

bs4 kullanıyorsanız, sayfada ortalamakjustify-content-center için gezinme sekmelerinize sınıf ekleyebilirsiniz . sekmelerinizin yaslanmasını (dolu) nav-justifiedistiyorsanız ona sınıf ekleyin , bu durumda nav'ınızda 3 öğe varsa her birinin% 33'ü vardır. 5 madde varsa her birinin% 20'si vardır.

başka bir yol da bs3text-center kullanıyorsanız eklemektir .

‌Bootstrap'in kendisi bu açıdan adlandırılmış bir sınıfa sahiptir nav-justified. Basitçe şöyle ekleyin:

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

Merkez içeriğini de hizalamak istiyorsanız <li>, onun disply: inline-block.

Bunu dene:

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