Горизонтально центрирующая группа блочных элементов

Question

http://jsfiddle.net/vrcQp/

Я хочу, чтобы эти кнопки были отцентрированы (три версии представляют разные возможные версии одной и той же вещи) ... поэтому CSS и HTML должны быть одинаковыми для всех ... толькоколичество элементов должно измениться.

Я хочу, чтобы они имели заданную ширину, чтобы я не мог использовать встроенные элементы (и просто выравнивал по центру).

Мне также нужна разметка htmlбыть достаточно простым, чтобы его можно было также использовать для гибкого расположения кнопок по вертикали с помощью другой таблицы стилей

Есть мысли о том, как этого добиться?Я не вижу никакого способа.

Прямо сейчас есть 1-3 элемента ... в идеале это могло бы охватить потенциально любое число, но в этом нет необходимости.И я бы хотел, чтобы он работал в IE6 ..

Answer 1

Я отредактировал для вас: http://jsfiddle.net/vrcQp/6/

Answer 2

Если вы не возражаете против изменения ширины кнопок с процентов на px, то вы можете использовать методику, описанную в этой статье . Он в основном использует положение: относительное; вместе с левым: 50%; и правильно: 50%; центрировать элементы по горизонтали в меню.

jsFiddle пример

Answer 3

Здесь просто замените float:left; на display:inline-block;

Но почему ваша кнопка <div>? Мне кажется, <button> или <input /> по умолчанию являются inline-block. Для совместимости я позволю вам проверить, что: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 4

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

Это то, что вы пытаетесь сделать?