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

当前回答

<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{
  margin:0px auto; //it will center them 
}

0px从上到下,auto从左到右。

使用CSS属性text-align: center

我尝试了下面的代码,它为我工作。

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

按钮控件在一个div和使用中心块类的bootstrap帮助我将按钮对齐到div的中心

检查链接,您将找到中心块类

http://getbootstrap.com/css/#helper-classes-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>

我有这个问题。我使用

<div class = "col-xs-8 text-center">

在我的div包含一些h3行,一对h4行和一个Bootstrap按钮。 在我使用文本中心后,除了按钮之外的所有内容都跳转到中心,所以我进入我的CSS表覆盖Bootstrap并给按钮一个

margin: auto;

这似乎解决了问题。