我在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="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

这样,如果你设置了btn-block,也可以指定按钮大小。 当然,这只适用于md大小范围,如果你想设置其他大小,使用xs,sm,lg。

其他回答

为你的风格添加:

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

用“text-center”类在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>

Edit

从BootstrapV4开始,中心块被删除了#19102,取而代之的是m-*-auto

你可以通过给这些元素一定的边距来实现。

例如

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

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

这对我很有用 尝试创建一个独立的<div>,然后将按钮放入其中。 就像这样:

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

然后转到你的CSSStyle页面,像这样做Text-align:center:

#contactBtn{text-align: center;}

使用CSS属性text-align: center