CSS将多个图像排成行（金字塔形成）

Question

http://jsfiddle.net/XKL6E/

如何将这些图像居中，使它们形成金字塔（中途相互重叠）？

Answer 1

如果您不关心支持IE7，则可以使用display: inline-block代替float: left，并将整个块放在中心位置：http://jsfiddle.net/XKL6E/16/

Answer 2

添加display：inline-block to .empty-button，text-align：center to .button_row：

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

Answer 3

如果您将所有按钮更改为span元素而不是div，则可以将display: inline-block应用于它们。

感谢 @Blender 了解inline-block这个想法以及这个小提琴的原始版本。

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

编辑：

我忘了提及，inline-block和div元素之间的span之间的差异是IE7支持。像this one这样的文章提供了各种各样的hacky方法来完成这项工作。对于div元素，替换span就足够了。

Answer 4

使用固定宽度div并使用

自动对中它们

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

固定宽度取决于图像的宽度。如果图像宽度总是相同的，我假设在你的情况下，你可以将宽度乘以整数（使用jQuery .css（attr，value）选择器）。