为什么这些 li 不居中？答案

【问题标题】：Why do these li's not center?为什么这些 li 不居中？
【发布时间】：2013-12-12 12:43:48
【问题描述】：

我试图让这些列表项在列表中居中，但我似乎无法找出问题所在。代码如下：

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;
}

【问题讨论】：

标签： html css html-lists centering

【解决方案1】：

如果您不使用 CSS 重置，则应该这样做。 http://www.cssreset.com/

CSS 重置将使您的元素标准化，以便您了解它们的行为；对他们有什么期望。

默认情况下，uls 和 ols 将在它们的左侧填充，用于子弹 :)

http://jsfiddle.net/MXGz5/

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

...解决了这个问题。

【讨论】：

【解决方案2】：

最好的解决方案是将text-align:center; 用于ul 元素并设置display:inline-block; 用于li 元素。

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

DEMO

【讨论】：

这不会使列表中的列表项居中 - 如上所述，padding:0; 是必需的。