Як відцентрувати вкладки завантажувальної стрічки на сторінці?

Я використовую twitter bootstrap для створення перемикаються вкладок. Ось 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>

Цей html відображає вкладки правильно, але відтягується ліворуч (саме це має відбутися). Я спробував попрацювати з CSS, щоб перекласти вкладки в центр сторінки, але поки що не везло. Я думав, хтось із більшим досвідом роботи з CSS знатиме, як це зробити.

Як примітка, є ще одне питання про центрирування навігаційних таблеток, яке я спробував, але воно не працювало лише з простими навігаційними вкладками.

Дякую.

nav-tabsЕлементи списку автоматично завантажуються вліво за допомогою завантажувальної стрічки, тому вам доведеться скинути це і замість цього відобразити їх як inline-block, а до центральних пунктів меню ми повинні додати атрибут text-align:centerв контейнер, наприклад:

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

Демо: http://jsfiddle.net/U8HGz/2/show/ Редагувати тут: http://jsfiddle.net/U8HGz/2/

Редагувати: виправлена ​​версія, яка працює в IE7 +, надана користувачем @My Head Hurts у коментарях нижче.

Демо: http://jsfiddle.net/U8HGz/3/show/ Редагувати тут: http://jsfiddle.net/U8HGz/3/

Прийнята відповідь ідеальна. Його можна додатково налаштувати, щоб ви могли використовувати його поруч зі стандартними вирівняними по лівій вкладці.

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

Щоб використовувати його, додайте клас "по центру" до елемента ваших вкладок

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

Додавання класу nav-justifiedпрацює для мене. Це не тільки центр вирівнює вкладки, але й красиво розподіляє їх у верхній частині.

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

Незважаючи на те, що прийнята відповідь працює добре, я знайшов вищезгадане більш природним для Bootstrap.

Просто додаючи

margin-left:50%;

коли я встановлював свої вкладки, працював на мене.

Наприклад,

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

Ви можете просто використовувати сітку bootstrap для центрування ваших навігаційних вкладок. Оскільки сітка bootstrap розділена на 12 рівних стовпців, ви можете легко використовувати 4 стовпці для навігації зі зміщенням 4 стовпців:

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

Тому ви отримуєте навігацію посередині сторінки (також адаптивне рішення) із 4 вільними стовпцями зліва та праворуч.

Я знайшов сітку справді корисною для створення адаптивних веб-сторінок. Удачі!

<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, ви можете просто додати justify-content-centerклас до своїх навігаційних вкладк, щоб відцентрувати його на сторінці. якщо ви хочете, щоб ваші вкладки були виправданими (повноцінними), додайте nav-justifiedдо них клас, у цьому випадку, якщо у вас є 3 елементи у навігаційній системі, кожна з них має 33%. якщо є 5 предметів, кожен має 20%.

інший спосіб - просто додати, text-centerякщо ви використовуєте bs3 .

Itself Сам Bootstrap має клас для цього назви nav-justified. Просто додайте його так:

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

Якщо ви також хочете вирівняти вміст центру <li>, зробіть його disply: inline-block.

Спробуйте це:

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