html - 在元素中居中 Bootstrap 按钮组

Question

我正在尝试找出将 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 的中心(假设它适合)？我想出的方法如下:我在 btn-group 周围包裹了一个 div，计算出那个 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*/
}

Answer 1

只需在容器上使用 .text-center 因为 .btn-group 是内联 block :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>