html - 使用CSS将具有绝对位置的列表放入div的中间

Question

我在某些设计上遇到了小问题。

我有这个非常简单的 html:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

这只是更大的小部件的一小部分。为了使这个小部件工作，我至少需要这个 css:

div {
    position: relative;
    width: 400px;
    height: 200px;
}

ul {
    z-index: 99;
}

li {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
}

现在我想把列表放在 div 中间。往下放没问题，但我往中间放是不可能的。列表可以有任意数量的元素。

JSfiddle:http://jsfiddle.net/MBxNU/1/

到目前为止，我试过例如:

ul {
    width: 100%;
    display: block;
    text-align: center;
}

但是它没有用，我不知道为什么。

如果你能给我一些帮助，我将不胜感激。

Answer 1

带有 text-align: center 的代码不起作用，因为您在 ul 中有 float 项。您可以使用 display: inline-block 而不是 float:

li {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: red;
    margin: 5px;
}

JSfiddle:http://jsfiddle.net/caprella/r2RjM/1/