Как центрировать вкладки начальной загрузки twitter на странице?

Я использую 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%;">

Вы можете просто использовать сетку начальной загрузки для центрирования вкладок навигации. Поскольку сетка начальной загрузки разделена на 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 .

‌Bootstrap имеет для этого класс с именем nav-justified. Просто добавьте это так:

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

Если вы хотите выровнять и центральное содержимое <li>, сделайте его disply: inline-block.

Попробуй это:

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