如何让不固定个数的子元素自动适应居中

本文我们学习以下如何让不固定个数的子元素自动适应居中。如何让固定宽度的子元素，在不确定宽度的容器内水平居中（自适应）：UL 宽度不固定；LI 宽度固定，LI 是一个块。看起来还挺简单的。但大家为什么一直讨论不断。奇怪，实现了一下。发现其实还是很简单的。还是没有超出原来的解决方案，即使用 display:inline-block。实际要实现的效果应该是下面这个样子：

好吧，真正要忧伤的东西来了。这是一个正常现象，只要用 display:inline-block 就会有这样的问题。因为 IE6~7 并不完全支持这个属性，所以不存在这样的问题。好吧，好像是因为空白引起的。如果把所有空白都删除了就没问题了。但这始终不是什么好办法。我们的解决方法是（多谢@鸽子一起解决这个问题）：

@media screen and (-webkit-min-device-pixel-ratio:0){ #test{ /* 让 chrome 支持 12px 以下的字体 */ -webkit-text-size-adjust:none; } }

但是。问题是这个纠结的浏览器，竟然不认 font-size:0 这样的写法。还好经测试，幸运的是 font-size:1px 它认识，而且效果刚好是我们想要的：没有间隙。最终的代码是：

#test{ display:block;text-align:center; /* 解决间隙问题 */ font-size:0;}#test li{ display:inline-block;*display:inline;*zoom:1; /* 解决不能水平对齐问题 */ vertical-align:top; /* 解决间隙问题后遗症解决 */ font-size:13px;}/* 让 chrome 支持 12px 以下的字体 */@media screen and (-webkit-min-device-pixel-ratio:0){ #test{-webkit-text-size-adjust:none;font-size:1px;}}

=======

好吧，好久没写 CSS 了。在想，如果有天我开始记忆力不好，忘记 CSS 是怎么写的，怎么办？会不会像《Boston Legal》的 Deny Crane 一样抓狂。

=======

UPDATE: 2011.1.25 21:15
多谢 Atrl 同学和 Justice 同学提供的更方便的方法，避免了 hack：

ul{ float: left; left: 50%; position: relative;}li{ float: left; position: relative; right: 50%;}

UPDATE: 2011.1.26 16:21
但如果要给背景设置图片的话，第二种方法似乎有点悲剧。