Twitter Bootstrap: Центровые таблетки

Ответ 1

Это стало намного проще! Вам просто нужно использовать класс text-center в контейнере и применить display:inline-block к ul. Просто убедитесь, что у вас есть разрыв строки или абзац абзаца, разделяющий навигацию с любыми другими элементами внутри контейнера.

Готово! 2 дополнения класса, 1 строка CSS (не изменяйте файл bootstrap css!).

HTML:

<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

CSS

.center-pills { display: inline-block; }

Изменить 2015. По мере того как Артур Беляев воспитывал, Flexbox теперь поддерживается достаточно общий, что вы можете использовать это вместо:

.center-pills {
    display: flex;
    justify-content: center;
}

Ответ 2

Если вы хотите использовать таблетки переменной ширины в контейнере с переменной шириной, я бы предложил использовать тип отображения inline-block и добавить класс в контейнер для таблеток.

Вот как я добавил бутстрап для центрирования таблеток.

CSS

.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */

HTML:

<div class="row">
  <div class="span12 centered-pills">
    <ul class="nav nav-pills">
      <li><a href="#">derek</a></li>
      <li><a href="#">brooks</a></li>
      <li><a href="#">is</a></li>
      <li><a href="#">super</a></li>
      <li class="active"><a href="#">awesome</a></li>
    </ul>
  </div>
</div>

Ответ 3

Или flexbox:

.nav-pills {
    display: flex;
    justify-content: center;
}

Ответ 4

Если вы хотите, чтобы пилюли были центрированы вместо выравнивания по левому краю, вам нужно будет изменить css. Вам нужно будет указать ширину и изменить маржу, которая будет автоматической.

Например:

.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}

Ответ 5

В то время как ответ @minaz работает для списка с известной шириной, я бы предложил другое решение, которое действительно работает, даже если вы измените содержимое списка:

.tabs, .pills {
  text-align: center;
}

.tabs li, .pills li {
  float: none;
}

Или в SCSS:

.tabs, .pills {
  text-align: center;
  li { float: none; }
}

Это центрирует текст внутри списка и сбрасывает свойство float для элементов списка, поэтому на них влияет свойство text-align.