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

一尘不染

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

css

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

阅读 277

2020-05-16

共1个答案

一尘不染

用“文本中心”类在div中包装Button。

只需更改此：

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

2020-05-16