Как центрировать .btn-group из twitter-bootstrap?

Отредактировано: это изменилось в Bootstrap 3. См. решение для Bootstrap 3 ниже.

О добавлении обертки div не может быть и речи?

Посмотрите на этот пример: http://jsfiddle.net/EVmwe/4/

Важная часть кода:

/* a wrapper for the paginatior */
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
    width: inherit;
    display: inline-block;
}

a {
    float: left;   
}

Обертывание группы кнопок внутри раздела и установка div для выравнивания текста по центру. Группа кнопок также должна быть перезаписана, чтобы отображать встроенный блок и унаследованную ширину.

Перезапись отображения привязок на встроенный блок и float: none также, вероятно, сработает, как сказал @Andres Ilich.

Обновление для Bootstrap 3

Начиная с Bootstrap 3, у вас есть классы выравнивания (как показано в документации). Теперь вам просто нужно добавить класс text-center к родителю. Вот так:

<div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
</div>

См. рабочий пример здесь: http://jsfiddle.net/EVmwe/409/

Это работает для меня (Bootstrap 3):

<div class="text-center">
   <div class="btn-group">
      <a href=1 class="btn btn-small">1</a>
      <a href=1 class="btn btn-small">2</a>
      <a href=1 class="btn btn-small">3</a>
   </div>
</div>

или добавьте "постранично ориентированный", например:

<div class="btn-toolbar pagination-centered">
  <div class="btn-group">
    <a href=1 class="btn btn-small">1</a>
    <a href=1 class="btn btn-small">2</a>
    <a href=1 class="btn btn-small">3</a>
  </div>
</div>

для начальной загрузки 4

<div class="text-center">
    <div class="btn-group">
        <a href="#" class="btn btn-primary">text 1</a>
        <a href="#" class="btn btn-outline-primary">text 2</a>
    </div>
</div>

Просто объявите свои ссылки на кнопки как inline-block вместо float:left, и ваше объявление text-align:center будет работать, например:

.btn-group a {
    display:inline-block;
}

Демонстрация: http://jsfiddle.net/EVmwe/3/

Начиная с Twitter Bootstrap 3 нет необходимости в каком-либо обходном пути. Просто укажите text-align: center для родительского элемента.

Если кто-то также хочет изменить ширину группы .btn, вы можете сделать минимальную ширину, а не ширину. Я сделал это:

HTML:

<div class="text-center">
<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
</div>
</div>

CSS:

.btn-group {min-width: 90%;}
.btn {width: 50%;}

Это устанавливает ширину группы кнопок на 90% от центра текста, а каждая включенная кнопка составляет 50% от группы кнопок (45% от блока div с центром текста).

В Bootstrap 3 вам просто нужно структурировать так же просто, как следующее изменение

    <div class="btn-toolbar">
        <div class="btn-group">
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 1                                     
            </button>           
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 2
            </button>
            <button onclick="#" class="btn btn-default btn-sm" type="button">                                               
                Click 3
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 4
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 5
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 6
            </button>
        </div>
    </div

И измените стиль только на это (переопределите начальную загрузку), который заставляет плавать влево, чтобы вы не могли принудительно использовать поля или центр текста:

.btn-toolbar .btn-group {float:initial;}

Это работает для меня, без особых изменений.

Я использую следующее решение.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Бросьте btn-group в тег p и используйте стиль text-align:center для p {}

    p {
    text-align: center;
    }

    <p>
    <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
    </div>
    </p>

Это помогло мне в Bootstrap v3.3

.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}