Question

我正试图将此菜单置于中心位置。为什么我不能用我尝试居中的两种方式来集中它？我尝试将其与html和css集中在一起，如注释所示。我只是想知道为什么，我可能想出来，但这需要我很长时间。我知道我可以用位置来修复它：绝对;顶部：50％;左：50％;但即便如此，我如何以良好的方式使用它？我如何正确地使用绝对定位并以良好的方式？那相对位置是什么？用于什么以及与绝对相比如何？ Plz，谢谢你。

这是我的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的影响，span仅适用于内联元素，例如strong，em，{{1它可以应用于块，以便其中的任何文本或内联元素居中，但不会使块居中。块级元素将扩展以填充所有水平空间，因此在没有首先定义它的宽度的情况下不能居中。

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

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

此外，center代码已弃用，但在当天，它们也被用于居中文字。

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

Answer 2

从float:left中删除LI，然后添加display：inline，例如

li {
    display:inline
}

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

text-align:center上的UL并未使您的LI居中，因为LI是块元素，而您正在应用浮点数。

为什么我不能集中这个HTML？

2 个答案: