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

Answer 1

使用"text-center"类将div包装在div中.

只需改变这个:

<!-- 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被放弃#19102赞成m-*-auto

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>

所有类center-block都是告诉元素的边距为0 auto,auto是左/右边距.但是,除非类text-center或css text-align:center; 在父项上设置,元素不知道计算出这个自动计算的点,因此不会按预期中心.

请参阅上面代码的示例:https://jsfiddle.net/Seany84/2j9pxt1z/

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>

Answer 4

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

Answer 5

添加到你的风格:

显示:表; 保证金:0自动;

Answer 6

您可以通过提供边距或绝对定位这些元素来实现。

例如

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

0px将来自顶部和底部，而auto将来自左侧和右侧。

Answer 7

我尝试了以下代码,它对我有用.

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

按钮控件在div中,使用center-block类引导程序帮助我将按钮与div的中心对齐

检查您将找到中心区类的链接

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