Html 在元素中居中引导按钮组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21392834/
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
Centering bootstrap button group in an element
提问by EleventyOne
I am trying to figure out the best way to center a Bootstrap button group (i.e., btn-group) within an element. So, for example, if you have this:
我试图找出将 Bootstrap 按钮组（即btn-group）居中的最佳方法。所以，例如，如果你有这个：
<div id='toolbar'>
<div class="btn-group">
<button type="button" class="btn btn-default">Command1</button>
<button type="button" class="btn btn-default">Command2</button>
</div>
</div>
How might I ensure that the btn-groupis always centered within toolbar(assuming it can fit)? The way I came up with is as follows: I wrap a divaround the btn-group, figure out the width of that btn-group, and then set that width on the wrapper along with margin:0 auto. However, there are two things I don't like about this approach:
我如何确保btn-group始终居中toolbar（假设它可以适合）？我想出的方法如下：我将 a 包裹在div周围btn-group，计算出它的宽度btn-group，然后在包装器上设置该宽度以及margin:0 auto。但是，我不喜欢这种方法的两件事：
(1) It requires trial and error to figure out exactly what the width of the btn-groupis, through setting a border on the wrapper and continually reducing it until you find the right width.
(1)btn-group通过在包装纸上设置边框并不断减小它直到找到合适的宽度，需要反复试验才能准确地确定宽度是多少。
(2) If the width of the content changes even by a pixel (e.g., button text changes, or it just looks different on a different machine because of their font settings, etc.) then it's no longer centered and the second button drops down a line. Of course, you could leave a few pixels of leeway here, but then the two buttons wouldn't actually be fully centered in the first place.
(2) 如果内容的宽度甚至改变了一个像素（例如，按钮文本发生变化，或者由于字体设置等原因在不同机器上看起来不同）那么它不再居中并且第二个按钮下降一条线。当然，您可以在此处留出一些像素的余地，但是这两个按钮实际上不会首先完全居中。
There must be a better way. Any ideas? Here's my approach (jsfiddle):
一定会有更好的办法。有任何想法吗？这是我的方法（jsfiddle）：
html:
html:
<div id='toolbar'>
<div class='wrapper'>
<div class="btn-group">
<button type="button" class="btn btn-default">Command1</button>
<button type="button" class="btn btn-default">Command2</button>
</div>
</div>
</div>
css:
css:
#toolbar {
width: 100%;
max-width: 700px;
margin: 10px;
border: 1px solid black;
padding: 10px;
}
#toolbar .wrapper {
width: 197px;
margin: 0 auto;
/*border: 1px solid blue; used to test width*/
}
回答by adrift
Just use .text-centeron the container since .btn-groupis inline block: fiddle
.text-center由于.btn-group是内联块，因此只需在容器上使用：fiddle
<div id='toolbar'>
<div class='wrapper text-center'>
<div class="btn-group">
<button type="button" class="btn btn-default">Command1</button>
<button type="button" class="btn btn-default">Command2</button>
</div>
</div>
</div>
回答by Blazemonger
Since the button group uses display: inline-block, the correct way to center them would be
由于按钮组使用display: inline-block，将它们居中的正确方法是
#toolbar .wrapper {
text-align: center;
}
http://jsfiddle.net/mblase75/USqQn/
http://jsfiddle.net/mblase75/USqQn/
(You can also apply the style to #toolbarand remove the div.wrapperentirely -- depending on whether you have anything else inside the toolbar. http://jsfiddle.net/mblase75/USqQn/1/)
（您也可以将样式应用于#toolbar并div.wrapper完全删除- 取决于工具栏内是否还有其他内容。http://jsfiddle.net/mblase75/USqQn/1/）
