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

How to center .btn-group from twitter-bootstrap?

提问by evfwcqcg

I'm using twitter-bootstrap, and i found it fairly hard to center divwhich has class .btn-group(link). Usually, I use

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

margin: 0 auto; 

or

或者

text-align: center;

to center stuff within div, but it doesn't work when inner element has property float: leftwhich in this case uses for visual effects.

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

http://jsfiddle.net/EVmwe/1

http://jsfiddle.net/EVmwe/1

回答by mikaelb

Edited: This has changed as of Bootstrap 3. See solution for Bootstrap 3 below.

已编辑：自 Bootstrap 3 起这已更改。请参阅下面的 Bootstrap 3 解决方案。

Is adding a wrapping div out of the question?

添加包装 div 是不可能的吗？

Look at this example: http://jsfiddle.net/EVmwe/4/

看这个例子：http: //jsfiddle.net/EVmwe/4/

Important part of the code:

代码的重要部分：

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

Wrapping the button group within a division, and setting the div to text-align center. The button group must also be overwritten to have display inline-block and inherited width.

将按钮组包裹在一个分区内，并将 div 设置为文本对齐居中。还必须覆盖按钮组以显示行内块和继承宽度。

Overwriting the anchors display to inline-block, and float: none, would also probably work, as @Andres Ilich said.

正如@Andres Ilich 所说，将锚点显示覆盖到 inline-block 和 float: none 也可能会起作用。

---

---

Update for Bootstrap 3

Bootstrap 3 的更新

As of Bootstrap 3, you have alignment classes (as seen in the documentation). You now simply have to add the text-centerclass to a parent. Like so:

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

See working example here: http://jsfiddle.net/EVmwe/409/

请参阅此处的工作示例：http: //jsfiddle.net/EVmwe/409/

回答by Alberto Gaona

This works for me (Bootstrap 3):

这对我有用（引导程序 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>

回答by Hanzaplastique

or add "pagination-centered", example:

或添加“以分页为中心”，例如：

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

回答by Vasil Valchev

for bootstrap 4

用于引导程序 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>

回答by Tim

Since Twitter Bootstrap 3 there is no need for any workaround. Just specify the text-align: centerfor the parent element.

从 Twitter Bootstrap 3 开始，不需要任何解决方法。只需text-align: center为父元素指定。

回答by Andres Ilich

Just declare your button links as inline-blockinstead of float:leftand your text-align:centerdeclaration will work, like so:

只需将您的按钮链接声明为inline-block而不是，float:left您的text-align:center声明就会起作用，如下所示：

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

Demo: http://jsfiddle.net/EVmwe/3/

演示：http: //jsfiddle.net/EVmwe/3/

回答by Nagra

In case anyone also wants to change the width of the .btn-group, you can do min-width rather than width. I did this:

如果有人也想改变 .btn-group 的宽度，你可以做 min-width 而不是 width。我这样做了：

HTML:

HTML：

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

CSS:

CSS：

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

That set the btn-group width to 90% of text-center and each included button is 50% of the button group (45% of the text-center div).

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

回答by Rusty

I am using the following solution.

我正在使用以下解决方案。

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

回答by Diego

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

回答by Shankar ARUL - jupyterdata.com

This did the trick for me in Bootstrap v3.3

这在 Bootstrap v3.3 中对我有用

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