Bootstrap CSS中的margin 0 auto不能居中。

Question

我目前正在使用BootStrap 3。但是我无法使按钮组居中。

HTML

<div class="container" style="margin-top:100px;">             
 <div class="btn-group" style="margin:0 auto">
     <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>
</div>

我应该如何修复这个问题？

- user3001055

Answer 1

Bootstrap 4 使用

使用 text-center 或 mx-auto 或 container-fluid

1. 您可以使用这个技巧：text-center，这不仅适用于文本。

2. 或者使用确切的 Bootstrap 4 类 mx-auto

例如 class="text-center" 或 class="mx-auto"

在上下文中

<div class="btn-group text-center"> or <div class="btn-group mx-auto">

尽量不要使用内联样式（不好的实践）

<div class="btn-group" style="margin:0 auto">

---

参考资料：

text-center => https://getbootstrap.com/docs/4.0/utilities/text/

mx-auto => https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering

- Jonathan Sanchez

Answer 2

您不需要使用内联样式，只需应用已经包含在Bootstrap中的类"text-center"。

- Guillermo Mansilla

Answer 3

编辑：Guillemo Mansilla的回答更好。使用相同的技术，但更好地利用了现有的Bootstrap类。

您可以在.container上设置text-align:center。无需margin:0 auto。

.container {
  text-align: center;
  margin-top: 100px;
}

http://jsbin.com/oyaDokOw/2/edit

- davidpauljunior