CSS 如何在引导程序的跨度中居中宽度未知的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7940769/
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 a width unknown button in a bootstrap's span?
提问by Alex Chen
I have a button generated by backbone.js and jQuery.tmpl() and width of the button is variant. I want to put it in a span6 div. Code is shown below:
我有一个由backbone.js 和jQuery.tmpl() 生成的按钮，按钮的宽度是可变的。我想把它放在span6 div中。代码如下所示：
<div class="row">
<div class="span6">
<button class="btn primary large">
BLABLABLA
</button>
</div>
<div class="span10">
...
</div>
</div>
I don't know how to make the button centered in the div.
我不知道如何使按钮在 div 中居中。
回答by dgorissen
Im no CSS guru but this does the trick for me (centers the button within the span6):
我不是 CSS 大师，但这对我有用（将按钮放在 span6 中）：
<div class="row">
<div class="span6" style="text-align:center">
<button class="btn primary large">
BLABLABLA
</button>
</div>
</div>
More info on centering can be found here.
可以在此处找到有关居中的更多信息。
回答by Zeograd
A bit late but you can use the pagination-centered class from bootstrap
有点晚了，但您可以使用 bootstrap 中以分页为中心的类
<div class="span6 pagination-centered">
<button class="btn primary large">
BLABLABLA
</button>
</div>
回答by h2ooooooo
What about <a>tags?
什么<a>标签？
If you have an <a>tag button, then the other approaches won't work, as a.btnhas a float: leftattribute in the bootstrap source.
如果您有<a>标签按钮，则其他方法将不起作用，就像引导程序源中a.btn的float: left属性一样。
<div style="text-align: center;">
<a href="#" class="btn">Button text</a>
</div>
This can be undone 2 ways.
这可以通过两种方式撤消。
Solution 1
解决方案1
Add a custom less file and import bootstrap.
添加自定义less文件并导入引导程序。
bootstrap-custom.less
bootstrap-custom.less
@import "bootstrap.less";
a.btn {
float: none !important;
}
And then compile your custom less file, or simply specify it in another CSS file:
然后编译你的自定义 less 文件，或者简单地在另一个 CSS 文件中指定它：
styles.css
样式文件
a.btn {
float: none !important;
}
Solution 2
解决方案2
Simply do it inline using style="float: none;":
只需使用style="float: none;"以下方法内联即可：
<div style="text-align: center;">
<a href="#" class="btn" style="float: none;">Button text</a>
</div>
回答by yorkfx
Other Solution
其他解决方案
<div class="row-fluid pagination-centered">
<a href="#" class="btn btn-large">Button</a>
</div>
<div class="clearfix"></div>
回答by Michael Groh
I had this same issue, I wrapped the in
我有同样的问题，我包裹了
<a class="btn btn-primary" href="#" role="button">Text Here</a>
Became
成为
<div class="text-center">
<a class="btn btn-primary" href="#" role="button">Text Here</a>
</div>
