无法居中我的导航答案

【问题标题】：Can't Center My Navigation无法居中我的导航
【发布时间】：2023-04-03 10:40:02
【问题描述】：

我有一个必须为 900 像素宽的导航栏，但里面的链接不一定总是跨越栏的整个宽度，所以我想将链接居中。问题是无论我尝试什么，链接都不会居中。这是我的 CSS：

.center {
    text-align: center;
}
nav {
    width: 900px;
    text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    margin: 0 auto 20px auto;
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    background: #C0C0C0;
}
nav ul:after {
    content:" \2022 ";
    clear: both;
    display: block;
}
nav ul:last-child:after {
    content:"";
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    text-align: center;
    display: block;
    padding: 20px 15px;
    text-decoration: none;
}
nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
}
nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}

我尝试将自动边距添加到导航 id，而导航 ul id 无济于事，然后我尝试将列表包装在 div 中，并使用一个使内容居中对齐的类，但这也不起作用。然后我尝试了 text-align 无济于事。我不知道该怎么做所以任何帮助将不胜感激！

这是我一直在使用的 JDFiddle：http://jsfiddle.net/VCKMU/2/

更新：在接受@Adrifts 的建议并将列表项从float:left 更改为inline-block 后，它们现在居中对齐，但现在所有子项都是内联块而不是垂直列表.有什么想法吗？

更新的 JSFiddle：http://jsfiddle.net/VCKMU/6/

【问题讨论】：

标签： html css

【解决方案1】：

不要浮动列表项，只需将它们的显示值更改为inline-block;，因为您已在其包含块上指定text-align: center;。

http://jsfiddle.net/VCKMU/6/

唯一的问题是这会导致子项在它们应该是垂直的时变成内联列表。

您只需要修改选择器以仅针对列表项是第一个<ul> 的子项：

.center > ul > li {
display: inline-block;
}

http://jsfiddle.net/VCKMU/8/

【讨论】：

唯一的问题是这会导致子项在它们应该是垂直的时变成内联列表。
@Noelle，然后您必须将特定样式添加到子项。你的父母风格正在接管。 CSS 级联起来。因此，除非指定子样式，否则子代将继承父代。
哦，哇。列表...我永远不会完全正确！哈哈。谢谢@Adrift - 该列表正在运行。
谢谢@Carlos。以后会多加注意的！

【解决方案2】：

如果你给nav { width: auto; margin: auto; }，我认为它应该可以工作我通常会在 Chrome 调试器中鬼混，以解决此类问题。

【讨论】：