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

html CSS

西门

2020-03-24

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

第3402篇《如何在Twitter Bootstrap 3中将按钮居中？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

小宇宙 2020.03.24

根据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所做的只是告诉元素的auto边距为0，其中auto为左/右边距。但是，除非类text-center或css text-align：center; 是在父对象上设置的，元素不知道要从中进行此自动计算的点，因此不会使自己居中。

在这里查看上面的代码示例：https : //jsfiddle.net/Seany84/2j9pxt1z/

凯西里 2020.03.24

添加到您的样式：

显示：表；保证金：0自动;

小胖Gil 2020.03.24

用“文本中心”类将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