Horizontally centering group of block elements

Question

http://jsfiddle.net/vrcQp/

I want these buttons to be centered (the three versions represent different possible versions of the same thing).. so the css and html has to be the same for all.. just the number of items must change.

I want them to have a set width so I cannot use inline elements (and just text-align center it).

I also need the html mark-up to be simple enough that it could also be used to flexibly stack the buttons vertically with a different stylesheet

Any thoughts on how to accomplish this? I'm not seeing any way to.

Right now there's 1-3 elements.. ideally it would cover potentially any number but that's not necessary. And I'd like for it to work in IE6..

Answer 1

I edited for you: http://jsfiddle.net/vrcQp/6/

Answer 2

Here just replace float:left; by display:inline-block;

But why your button are <div>? It seems to me <button> or <input /> are inline-block by default. For compatibility, I let you check that: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 3

If you don't mind changing the width of your buttons from percent to px, then you can use the technique explained in this article. It basically uses position: relative; along with left: 50%; and right: 50%; to center items horizontally in a menu.

jsFiddle example

Answer 4

http://jsfiddle.net/vrcQp/8/

Is that what you are trying to do?