我在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>
当前回答
我尝试了下面的代码，它为我工作。
<button class="btn btn-default center-block" type="submit">Button</button>
按钮控件在一个div和使用中心块类的bootstrap帮助我将按钮对齐到div的中心
检查链接，您将找到中心块类
http://getbootstrap.com/css/#helper-classes-center
其他回答
这对我很有用 尝试创建一个独立的<div>，然后将按钮放入其中。 就像这样:
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>
然后转到你的CSSStyle页面，像这样做Text-align:center:
#contactBtn{text-align: center;}
<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>
我尝试了下面的代码，它为我工作。
<button class="btn btn-default center-block" type="submit">Button</button>
按钮控件在一个div和使用中心块类的bootstrap帮助我将按钮对齐到div的中心
检查链接，您将找到中心块类
http://getbootstrap.com/css/#helper-classes-center
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
你可以通过给这些元素一定的边距来实现。
例如
.button{
margin:0px auto; //it will center them
}
0px从上到下，auto从左到右。
