我怎么不能居中这个html？ [复制]

Question

我正在尝试使此菜单居中。为什么我不能用我试图居中的两种方式来居中？我尝试使用 html 和 css 将其居中，如 cmets 所示。我只是想知道为什么，我可能会弄明白，但这需要我很长时间。我知道我可以用 position: absolute;top: 50%;left: 50%;但即便如此，我如何以一种好的方式使用它？我如何正确地使用绝对定位？还有什么是相对位置？那是用来做什么的，与绝对相比如何？请和谢谢。

这是我的 CSS：

ul {
    text-align: center; /* How come this doesn't center it? */
    padding: 4px;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
}

li {
    float: left;
}

a.menuItem:link,
a.menuItem:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: white;
    background-color: #800000;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a.menuItem:hover,
a.menuItem:active {
    background-color: black;
}

这是我的 HTML：

<center> <!-- And how come this doesn't center it? -->
    <ul background="/victoria/cutiepie2.jpg">
        <li><a href="/scripts/call.php" class="menuItem">Call</a></li>
        <li><a href="/scripts/text.html" class="menuItem">Text</a></li>
        <li><a href="/menu/home.html" class="menuItem">Home</a></li>
        <li><a href="/menu/news.html" class="menuItem">News</a></li>
        <li><a href="/menu/media.html" class="menuItem">Media</a></li>
        <li><a href="/menu/downloads.html" class="menuItem">Downloads</a></li>
        <li><a href="/menu/forum.html" class="menuItem">Forum</a></li>
    </ul>
</center>

Answer 1

UL 元素是块级元素，因此它不受 text-align: center 的影响，text-align: center 仅适用于 span、strong、em 等内联元素。它可以应用于块，以便其中的任何文本或内联元素居中，但不会使块居中。块级元素将扩展以填充所有水平空间，因此如果不先定义其宽度，则无法居中。

更好的解决方案是在菜单上放置一个宽度，然后将水平边距设置为自动：

ul {
    padding: 4px;
    list-style-type: none;
    overflow: hidden;
    width: 960px;
    margin: 0 auto;
}

此外，center 标记已被弃用，但在当时，它们也被用于居中文本。

这是一个显示居中菜单的小提琴：http://jsfiddle.net/7Hjvc/1/

Answer 2

从LI 中删除float:left，并添加 display:inline，例如

li {
    display:inline
}

并从您的链接中删除 display:block。

UL 上的 text-align:center 没有使 LIs 居中，因为 LI 是块元素，而您正在对它们应用浮点数。