Html 引导程序中表单下的中心按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15867730/
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
Center button under form in bootstrap
提问by Fastkowy
i have some problems with Bootstrap. i centered form and button by using span6 offset3and don't know how to center button under this form right now. i tried with text-align: centerbut still it's more on the left.
我在使用 Bootstrap 时遇到了一些问题。我使用居中表单和按钮span6 offset3，现在不知道如何在此表单下居中按钮。我试过，text-align: center但仍然在左边更多。
<div class="container">
<div class="row">
<div class="span6 offset3">
<form>
<input class="input-xxlarge" type="text" placeholder="Email..">
<p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
</form>
</div>
</div>
</div>
回答by Leniel Maccaferri
Remove that <p>tag and add the button inside a <div class="form-actions">like this:
删除该<p>标签并在 a 中添加按钮，<div class="form-actions">如下所示：
<div class="form-actions">
<button type="submit" class="btn">Confirm</button>
</div>
an then augment the CSS class with:
然后使用以下内容扩充 CSS 类：
.form-actions {
margin: 0;
background-color: transparent;
text-align: center;
}
Here's a JS Bin demo: http://jsbin.com/ijozof/2
这是一个 JS Bin 演示：http: //jsbin.com/ijozof/2
Look for form-actionsat the Bootstrapdoc here:
form-actions在Bootstrap此处查找文档：
回答by Karl Gjertsen
With Bootstrap 3, you can use the 'text-center' styling attribute.
在 Bootstrap 3 中，您可以使用 'text-center' 样式属性。
<div class="col-md-3 text-center">
<button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
回答by Reeya Grace
If you're using Bootstrap 4, try this:
如果您使用的是Bootstrap 4，请尝试以下操作：
<div class="mx-auto text-center">
<button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
回答by Kevin Lynch
Width:100%and text-align:centerwould work in my experience
Width:100%并且text-align:center会根据我的经验工作
<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
回答by user3257693
Try adding this class
尝试添加这个类
class="pager"
<p class="pager" style="line-height: 70px;">
<button type="submit" class="btn">Confirm</button>
</p>
I tried mine within a <div class=pager><button etc etc></div>which worked well
我试过我的<div class=pager><button etc etc></div>，效果很好
See http://getbootstrap.com/components/look under Pagination -> Pager
请参阅http://getbootstrap.com/components/在 Pagination -> Pager 下查看
This looks like the correct bootstrap class to center this, text-align: center;is meant for text not images and blocks etc.
这看起来像是将其居中的正确引导程序类，text-align: center;用于文本而不是图像和块等。
回答by Moncho Chavez
I do it like this <center></center>
我这样做 <center></center>
<div class="form-actions">
<center>
<button type="submit" class="submit btn btn-primary ">
Sign In <i class="icon-angle-right"></i>
</button>
</center>
</div>
回答by Mitch McCoy
Using Bootstrap, the correct way is to use the offset class. Use math to determine the left offset. Example: You want a button full width on mobile, but 1/3 width and centered on tablet, desktop, large desktop.
使用Bootstrap，正确的方法是使用offset类。使用数学来确定左偏移量。示例：您想要一个按钮在移动设备上全宽，但在平板电脑、台式机、大型台式机上为 1/3 宽并居中。
So out of 12 "bootstrap" columns, you're using 4 to offset, 4 for the button, then 4 is blank to the right.
因此，在 12 个“引导程序”列中，您使用 4 来偏移，4 用于按钮，然后 4 是右侧的空白。
See if that works!
看看有没有用！
回答by Legionar
With Bootstrap you can simply use class text-center:
使用 Bootstrap，您可以简单地使用 class text-center：
<div class="container">
<div class="row">
<form>
<input class="input-xxlarge" type="text" placeholder="Email..">
</form>
<div class="text-center">
<button type="submit" class="btn">Confirm</button>
</div>
</div>
</div>
回答by Legionar
Try giving
尝试给予
default width, display it with block and center it with margin: 0 auto;
默认宽度，用块显示并用边距居中：0 auto;
like this:
像这样：
<p style="display:block; line-height: 70px; width:200px; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
回答by chitra
It's working completely try this:
它的工作完全试试这个：
<div class="button pull-left" style="padding-left:40%;" >
