css - 无法在 CSS 和 HTML 中将我的文本 Logo 居中

Question

live demo on Codepen here

我无法确定我的错误并进行了搜索但才刚刚开始学习。

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav il {
    list-style: none;
    margin: 0 10px;
    padding 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-weight: 800;
    padding: 15px 10px;
}

Answer 1

这是因为您的导航中的无序列表不在中心。它有一个左填充值。您可以使用

更正它

nav ul {padding: 0;}

或更具体地说

#logo + nav ul {padding: 0;}

或者你也可以这样做

header nav ul {padding: 0;}

最后，您不必将所有填充设置为 0。对于上面列出的任何不同样式规则，您也可以只使用 padding-left: 0;。

所有这些都是偏好。基本上是无序列表的填充导致了这个问题。