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

Question

我对一些设计有小问题。

我有这个非常简单的html：

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

这只是一个更大的小部件的一小部分。为了使 thsi 小部件工作，我至少需要这个 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

给你 ;）

div {
    position: relative;
    left: 20px;
    top: 20px;
    background-color: #EEE;
    width: 400px;
    text-align: center;
    height: 200px;
}

ul {
    padding: 0;
    display: inline-block;
    z-index: 99;
    list-style: none inside;
}

li {
    float: left;
    width: 16px;
    height: 16px;
    background-color: red;
    margin: 5px;
}

所以主要思想是text-align: center为父母div和display: inline-block为设置ul，就是这样）

Answer 2

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

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

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