Question

我试图将这些列表项目放在列表的中心，但我似乎无法弄清楚问题。这是代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <link href="my.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <div id="centerDiv">
            <ul class="centerUL">
                <li><a href="http://www.amazon.com">Amazon 1</a></li>
                <li><a href="http://www.amazon.com">Amazon 2</a></li>
                <li><a href="http://www.amazon.com">Amazon 3</a></li>
            </ul>
        </div>    
    </body>
</html>

CSS

#centerDiv {
    width: 330px;
    text-align: center;
    border: 1px solid red;
}
.centerUL {
    width: 70%;
    margin: 2px auto;
    line-height: 1.4;
    border: 1px solid green;
}
li {
    display: inline;
    text-align: center;
    border: 1px solid orange;
}

Answer 1

如果你没有使用CSS重置，你应该。 http://www.cssreset.com/

CSS重置会使您的元素正常化，以便您知道它们将如何行动;从他们身上得到什么。

默认情况下，对于项目符号，ul和ol s会有一个左边填充：）

http://jsfiddle.net/MXGz5/

.centerUL {
    width: 70%;
    margin: 2px auto;
    padding: 0; /* this new line */
    line-height: 1.4;
    border: 1px solid green;
}

...解决问题。

Answer 2

最佳解决方案是对text-align:center;元素使用ul，并为display:inline-block;元素设置li。

ul{
text-align:center;
}
ul li{
display:inline-block;
}

DEMO

为什么这些李不是中心？

2 个答案: