在元素中居中引导按钮组答案

【问题标题】：Centering bootstrap button group in an element在元素中居中引导按钮组
【发布时间】：2014-02-18 23:57:41
【问题描述】：

我正在尝试找出将 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>

如何确保btn-group 始终位于toolbar 的中心（假设它可以容纳）？我想出的方法如下：我将div 包裹在btn-group 周围，计算出btn-group 的宽度，然后在包装器上设置该宽度以及margin:0 auto。但是，我不喜欢这种方法有两点：

(1) 通过在包装器上设置边框并不断减小它直到找到合适的宽度，需要反复试验才能准确确定btn-group 的宽度。

(2) 如果内容的宽度甚至改变了一个像素（例如，按钮文本发生了变化，或者由于字体设置而在不同的机器上看起来不同等），那么它不再居中，第二个按钮下拉一行。当然，您可以在此处留出几个像素的余地，但是这两个按钮实际上并不会一开始就完全居中。

一定有更好的方法。有任何想法吗？这是我的方法 (jsfiddle)：

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：

#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*/
}

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

只需在容器上使用.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>

【讨论】：

这可能是更“Bootstrap-y”的方式。当然，它本质上是相同的解决方案。

【解决方案2】：

由于按钮组使用display: inline-block，因此将它们居中的正确方法是

#toolbar .wrapper {
    text-align: center;
}

http://jsfiddle.net/mblase75/USqQn/

（您也可以将样式应用于#toolbar 并完全删除div.wrapper - 取决于工具栏中是否还有其他内容。http://jsfiddle.net/mblase75/USqQn/1/）

【讨论】：