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

我正在使用twitter-bootstrap，发现居中div具有类.btn-group（link）的位置相当困难。通常，我用

margin: 0 auto; 

要么

text-align: center;

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

http://jsfiddle.net/EVmwe/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/

这对我有用（引导程序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组的宽度，则可以执行min-width而不是width。我这样做：

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

将btn-group宽度设置为文本中心的90％，每个包含的按钮为按钮组的50％（文本中心div的45％）。

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

<div class="btn-group mx-auto" role="group">
    <a href="#" class="btn btn-outline-primary"> Button 1</a>
    <a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>

将btn-group放在ap标签中，并为p {}使用text-align：center样式

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