如何从 twitter-bootstrap 将 .btn-group 居中？

Question

我正在使用 twitter-bootstrap ，我发现它很难居中 div 具有类 .btn-group （ 链接）。通常，我使用

margin: 0 auto;

要么

text-align: center;

将内容放在 div 中，但当内部元素具有属性 float: left 时它不起作用，在这种情况下用于视觉效果。

http://jsfiddle.net/EVmwe/1

原文由 evfwcqcg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

已编辑：自 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 设置为文本居中对齐。按钮组也必须被覆盖以显示内联块和继承的宽度。

正如@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/

原文由 mikaelb 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将 text-center 添加到父级对我有用（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>

原文由 Alberto Gaona 发布，翻译遵循 CC BY-SA 4.0 许可协议