在元素中居中引导按钮组

Question

我试图找出btn-group在一个元素中居中Bootstrap按钮组(即)的最佳方法.所以,例如,如果你有这个:

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

Answer 1

只是.text-center在容器上使用,因为.btn-group是内联块:小提琴

<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>