Html Bootstrap：居中任何跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16272055/
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
Bootstrap: center any span
提问by Aki
I have a problem when using a class to center my span:
使用类来居中我时遇到问题span：
.center {
float:none;
margin-left: auto;
margin-right: auto;
}
<div class="row-fluid">
<div class="center span5">
<button></button>
</div>
</div>
This does not work, apparently it is overridden by bootstrap row-* CSS. However if I include the same style in the div directly (style="...") it works.
这不起作用，显然它被 bootstrap row-* CSS 覆盖。但是，如果我直接在 div 中包含相同的样式（style="..."），它会起作用。
I think it doesn't work because it doesn't knows the width, so I tried to use an offset, but then when the button isn't centered as well as with the .CSS. I can't specify a width since my buttonwidth is set by external JavaScript.
我认为它不起作用，因为它不知道宽度，所以我尝试使用偏移量，但是当按钮未居中以及使用 .CSS 时。我无法指定宽度，因为我的button宽度是由外部 JavaScript 设置的。
How can I make the .center class work in that case?
在这种情况下，我怎样才能让 .center 类工作？
回答by Leniel Maccaferri
As of Bootstrap 2.3.0 you can use the built in class .text-center.
从 Bootstrap 2.3.0 开始，您可以使用内置类.text-center.
<div class="row-fluid">
<div class="span12 text-center">
My content to be centered here
</div>
</div>
It worked perfectly for me... :)
它对我来说非常有效...... :)
回答by pickypg
You can center it with:
您可以将其居中：
.center {
margin: 0 auto !important;
float: none !important;
}
Or you can use:
或者你可以使用：
.row-fluid [class*="span"].center, .center {
margin: 0 auto;
float: none;
}
I tend to avoid !importantbecause you never know when it may differ with some other CSS. Interestingly, the above affect differs on both .row and .row-fluid.
我倾向于避免，!important因为您永远不知道它何时可能与其他 CSS 不同。有趣的是，上述影响在 .row 和 .row-fluid 上都不同。
回答by Kyle
When using the auto-margin method, you must define a width to the element. It can be any unit, but it must be defined:
使用自动边距方法时，您必须为元素定义宽度。它可以是任何单位，但必须定义：
.center {
width: 50%;
margin-left: auto;
margin-right: auto;
}
:)
:)
回答by Wang
.class {
margin:auto;
display:table;
}
Idk why, but it always works like a charm.
不知道为什么，但它总是像一个魅力。
回答by Quentin
I think it doesn't work because it doesn't knows the width
我认为它不起作用，因为它不知道宽度
This can't be true because:
这不可能是真的，因为：
if I include the same style in the div directly (style="...") it works
如果我直接在 div 中包含相同的样式（style="..."），它会起作用
… and if it didn't know the width in one case, then it wouldn't in the other either.
……如果它在一种情况下不知道宽度，那么在另一种情况下也不知道。
If using a styleattribute works, then that is a sign that the problem is one of specificity. Write the selector of your ruleset so that the specificityis greater then that of whatever rule is overriding those properties (or so that the specificity is equal but the ruleset appears later in the stylesheet).
如果使用style属性有效，那么这表明问题是一个特殊性问题。编写规则集的选择器，使特定性大于覆盖这些属性的任何规则的特定性（或者使特定性相等但规则集稍后出现在样式表中）。
You can use the Developer Tools of your browser to see which rules are being applied to the element so you can see the selector you have to be more specific than.
您可以使用浏览器的开发人员工具查看哪些规则应用于元素，以便您可以查看必须比其更具体的选择器。
