Html 如何在 Twitter Bootstrap 3 中居中按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22578853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center buttons in Twitter Bootstrap 3?
提问by Sam Bates
I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-blockclass to the button but that didn't work. How should I fix this?
我正在 Twitter Bootstrap 中构建一个表单，但我在将按钮居中放置在表单输入下方时遇到问题。我已经尝试将center-block类应用于按钮，但没有用。我应该如何解决这个问题？
Here is my code.
这是我的代码。
<!-- 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>
回答by Shekhar Pankaj
Wrap the Button in div with "text-center" class.
使用“文本中心”类将 Button 包裹在 div 中。
Just change this:
只需改变这个：
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>
To this:
对此：
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>
Edit
编辑
As of BootstrapV4, center-blockwas dropped #19102in favor of m-*-auto
作为BootstrapV4，center-block滴入＃19102赞成m-*-auto
回答by Seany84
According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center
根据 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>
All the class center-blockdoes is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.
该类center-block所做的就是告诉元素的边距为 0 auto，auto 是左/右边距。但是，除非类 text-center 或 css text-align:center; 设置在父级上，元素不知道从哪里计算出这个自动计算，所以不会像预期的那样居中。
See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/
在此处查看上面代码的示例：https: //jsfiddle.net/Seany84/2j9pxt1z/
回答by obe6
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button class="btn btn-primary" id="singlebutton"> Next Step!</button>
</div>
</div>
</div>
回答by Alexandre Pereira
<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>
回答by benjamin
add to your style:
添加到您的风格：
display: table; margin: 0 auto;
显示：表；边距：0 自动；
回答by user3443160
You can do it by giving margin or by positioning those elements absolutely.
您可以通过提供边距或绝对定位这些元素来实现。
For example
例如
.button{
margin:0px auto; //it will center them
}
0px will be from top and bottom and auto will be from left and right.
0px 将来自顶部和底部，auto 将来自左侧和右侧。
回答by Swapneel
I tried the following code and it worked for me.
我尝试了以下代码，它对我有用。
<button class="btn btn-default center-block" type="submit">Button</button>
The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div
按钮控件位于 div 中，使用引导程序的中心块类帮助我将按钮与 div 的中心对齐
Check the link where you will find the center-block class
检查您将找到中心块类的链接
回答by rsudip90
use text-align: centercss property
使用text-align: centercss 属性
回答by Chris
Update for Bootstrap 4:
Bootstrap 4 的更新：
Wrap the button with a div set with the 'd-flex' and 'justify-content-center' utility classes to take advantage of flexbox.
使用带有 '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>
The benefit of using flexbox is being able to add additional elements/buttons on the same axis, but with their own separate alignment. It also opens up the possibility of vertical alignment with the 'align-items-start/center/end' classes, too.
使用 flexbox 的好处是能够在同一轴上添加额外的元素/按钮，但它们自己单独对齐。它还开启了与“align-items-start/center/end”类垂直对齐的可能性。
You could wrap the label and button with another div to keep them aligned with each other.
您可以用另一个 div 包裹标签和按钮，以保持它们彼此对齐。
回答by Rusty
You can do the following. It also avoids buttons overlapping.
您可以执行以下操作。它还可以避免按钮重叠。
<div class="center-block" style="max-width:400px">
<a href="#" class="btn btn-success">Accept</a>
<a href="#" class="btn btn-danger"> Reject</a>
</div>
