Centering a group of boot buttons in an element

Question

I am trying to find a better way to center a group of Bootstrap buttons (i.e. btn-group) inside an element. So, for example, if you have this:

<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 can I guarantee that btn-groupit is always in the center toolbar(provided that it can fit)? The way I came up with is as follows: I wrap it divaround btn-group, calculate the width of this btn-group, and then set that width on the wrapper along with margin:0 auto. However, I do not like this approach:

(1) This requires trial and error to determine exactly what the width btn-groupis by setting the border on the wrapper and constantly reducing it until you find the desired width.

(2) If the width of the content is changed even using a pixel (for example, the button text is changed or just looks different on another machine due to their font settings, etc.), then it is no longer centered, and the second button lowers the line. Of course, you can leave a few pixels here, but then the two buttons will not actually be fully centered in the first place.

There must be a better way. Any ideas? Here is my approach ( 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

Just use .text-centerin the container as it .btn-groupis an inline 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>

Answer 2

display: inline-block,

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

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

( #toolbar div.wrapper - , - . http://jsfiddle.net/mblase75/USqQn/1/)