居中块元素

Question

首先，我先说我无法控制 HTML，这就是 HTML 的样子：

<ul class="orbit-bullets">
  <li>1</li>
  <li>2</li>
</ul>

我要说明的第二点是，我不介意使用 inline-block，但我需要对不支持的浏览器进行后备。

我正在尝试使列表居中。列表项必须内联显示，但它们必须是块元素，因为我声明了宽度、高度和文本缩进。所以我知道我可以使用display:block; float:left;，但我希望元素居中。并且有时列表项是三个或四个或更多，所以我不想在小于 500px 的无序列表上设置固定宽度。如果我将宽度设置为 500 像素，当只有两个或三个列表项时，它们会显得非常偏离中心。

我需要在仍然使用display:block; float:left; 的同时将列表项本身在无序列表中居中。
或者有没有办法在无序列表上具有可变宽度同时仍然拥有它居中？我有任何建议。

谢谢。

Answer 1

试试这个 - http://jsfiddle.net/jD6yp/

ul {
    width: 500px;
    text-align: center;
    background: beige;
}

li {
    display: inline-block;

    zoom: 1;          /* for old IE-s */
    *display: inline; /* for old IE-s */

    padding: 10px;
    margin: 20px;
    border: 1px solid pink;
}