Html 完美的中心与 Bootstrap 水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18993996/
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
Perfect center align horizontally with Bootstrap
提问by Seong Lee
There are some options I can choose from when it comes to horizontal center alignment with Bootstap.
在使用 Bootstap 进行水平居中对齐时，我可以选择一些选项。
I can either use offsetclass or use blank spanclass as a placeholder.
One other option can be using custom alignment like the following
我可以使用offset类或使用空白span类作为占位符。另一种选择是使用自定义对齐方式，如下所示
.center {
float: none;
margin: 0 auto;
}
None of these options solve my issue because the content of the div container has to fill up the width by 100%.
这些选项都不能解决我的问题，因为 div 容器的内容必须将宽度填满 100%。
Let's say I have the following
假设我有以下内容
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
</div>
If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.
如果按钮没有填满 的整个 div 空间span4，我将无法获得真正的居中对齐。也许，我可以将内容拉伸到 100%，但我不知道这是否是一种好的做法。
Here I have a canvas to play with. JS BIN
在这里，我有一个画布可以玩。JS斌
回答by koala_dev
Since you have inline elements you can just use the .text-centerclass on the span, also your're probably better off using offsets than empty elements:
由于您有内联元素，您可以只.text-center在跨度上使用该类，而且您可能最好使用偏移量而不是空元素：
HTML
HTML
<div class="row-fluid">
<div class="span4 offset4 text-center">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
Updated demo: http://jsbin.com/ayuFEhO/2/edit
回答by Vinícius Moraes
You don't need add a new class, if you want horizontal align this buttons, just use .text-centerhere is a bin http://jsbin.com/UVeGejO/1/edit
你不需要添加一个新类，如果你想水平对齐这个按钮，只需使用.text-center这里是一个 bin http://jsbin.com/UVeGejO/1/edit
Obs: text-centerclass already exist on twitter's bootstrap code.
Obs：text-center类已经存在于 twitter 的引导代码中。
