Horizontal CSS Alignment

Question

Can someone explain how I keep my buttons positioned in the center of the red area, no matter the width of the buttons?

Here is my Demo: http://jsfiddle.net/v3X2k/

And here is my code:

<div style="width:660px;height:40px;display;block;background:red">

    <div id="wrapper3" style="margin:0 auto;width:160px">

        <button>Test</button>
        <button>Test 2</button>

    </div>

</div>

<hr />

<div style="width:660px;height:40px;display;block;background:red">

    <div id="wrapper3" style="margin:0 auto;width:160px">

        <button>Test Test Test Test Test Test</button>
        <button>Test 2</button>

    </div>

</div>

You can see in the 2nd example, the 2nd button drops below, when actually I would like them to remain inline, like the ones above.

I'm happy to drop the width:160px statement, but just need to align these buttons centrally.

Any ideas?

Many thanks :)

Answer 1

Some people call it bad practice and I guess you do have to be careful but you can use:
<center></center>

Answer 2

text-align: center;

Buttons are inline elements, so this will work.

jsFiddle

Answer 3

You don't have to use a wrapper div with fixed width and margin auto...just use text-align: center; on container div

Demo