如何在Twitter Bootstrap 3中居中按钮？

Question

我正在使用Twitter Bootstrap构建一个表单，但是在表单中将按钮置于输入框下方时遇到了问题。我已经尝试为按钮应用center-block类，但没有效果。我该如何解决这个问题？

以下是我的代码。

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

- Sam Bates

Answer 1

to:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

转化为：

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

编辑

从BootstrapV4开始，center-block已被弃用，改用m-*-auto，详见#19102

- Shekhar Pankaj

---

甚至可以与Foundation一起使用 - divideByZero

Answer 2

根据 Twitter Bootstrap 文档：http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

class center-block 只是告诉元素具有0自动边距, 自动边距是指左/右边距。但是, 除非在父元素上设置了 class text-center 或 css text-align:center;, 否则元素不知道从哪个点开始计算这个自动计算, 因此不会像预期的那样居中。

这里可以查看上面代码的示例：https://jsfiddle.net/Seany84/2j9pxt1z/

- Seany84

Answer 3

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

- obe6

---

这是对我有效的一个。我尝试了上面的其他方法，但无法居中。 - mjwrazor

如何对 input 元素执行相同操作？ - InfZero

Answer 4

添加到你的样式：

display: table;（显示为表格） margin: 0 auto;（左右居中）

- benjamin

---

不确定您是如何得出这个结论的。 - Fergus

这应该是被接受的答案。完美地工作。 - cloudxix

Answer 5

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

- Alexandre Pereira

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - Ajean

Answer 6

我尝试了以下代码，它对我起作用了。

<button class="btn btn-default center-block" type="submit">Button</button>

按钮控件在一个div中，使用bootstrap的center-block类帮助我将按钮对齐到div的中心

查看链接，您将找到center-block类

http://getbootstrap.com/css/#helper-classes-center

- Swapneel

Answer 7

你可以通过设置外边距（margin）或将这些元素绝对定位来实现。

例如：

.button{
  margin:0px auto; //it will center them 
}

0px将从顶部和底部开始，auto将从左侧和右侧开始。

- user3443160

Answer 8

Bootstrap 4更新:

将按钮用设置了'd-flex'和'justify-content-center'实用类的div包裹起来，以发挥flexbox的优势。

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

使用flexbox的好处是可以在同一轴上添加其他元素/按钮，但具有自己独立的对齐方式。它还打开了使用“align-items-start / center / end”类进行垂直对齐的可能性。

您可以使用另一个div将标签和按钮包装在一起，以使它们相互对齐。

例如： https://codepen.io/anon/pen/BJoeRY?editors=1000

- Chris

Answer 9

使用 text-align: center CSS 属性

- rsudip90

Answer 10

对于Bootstrap 3

我们使用列来划分空间，使用8个小列（col-xs-8），留下4个空列（col-xs-offset-4），并应用属性(center-block)。

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

对于Bootstrap 4

我们使用Spacing，Bootstrap包含广泛的缩写和填充响应边距实用类来修改元素的外观。这些类使用{property}{sides}-{size}格式命名，适用于xs，以及{property}{sides}-{breakpoint}-{size}格式命名，适用于sm，md，lg和xl。

更多信息请参见：https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

- Gonen09

---

虽然这段代码片段可能解决了问题，但包括解释有助于提高您的回答质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您提出代码建议的原因。 - Stefan Crain