CSS центрирование нескольких изображений в строках (формирование пирамиды)

Question

http://jsfiddle.net/XKL6E/

Как я могу центрировать эти изображения так, чтобы они образовывали пирамиду (перекрывая друг друга на полпути)?

Answer 1

Если вы измените все кнопки на span элементы вместо div, вы можете применить к ним display: inline-block.

Кредит @ Blender за идею inline-block и оригинальную версию этой скрипки.

http://jsfiddle.net/XKL6E/21/

Edit:

Я забыл упомянуть, разница между inline-block на элементе div и span заключается в поддержке IE7. Такие статьи, как this , предлагают всевозможные хакерские способы сделать эту работу. В случае div элементов достаточно заменить span.

Answer 2

Добавить отображение: встроенный блок для кнопки .empty и выравнивание текста: по центру .button_row:

http://jsfiddle.net/XKL6E/14/

Answer 3

Если вам не нужна поддержка IE7, вы можете использовать display: inline-block вместо float: left и просто центрировать весь фрагмент: http://jsfiddle.net/XKL6E/16/

Answer 4

Использование div с фиксированной шириной и их автоматическое центрирование с помощью

margin-left: auto;
margin-right: auto;

Фиксированная ширина зависит от ширины изображений.Если ширина изображения всегда одинакова, что, как я полагаю, в вашем случае, вы можете умножить ширину на целое число (используйте селектор jQuery .css (attr, value)).