css - 居中 block 元素

Question

首先，我首先要说我无法控制 HTML，而 HTML 看起来是这样的:

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

我要说明的第二点是，我不介意使用 inline-block，但我需要为不支持的浏览器提供回退。

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

我需要在无序列表中将列表项本身居中，同时仍然使用 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;
}