我目前正在学习如何编写汉堡包菜单。我想让它在一行中指定的列的中心对齐，我正试图用导航中的链接做同样的事情。然而，我无法获得链接到中心适当。下面是我到目前为止的代码:

我的目标是对上一篇专栏中的汉堡包菜单也做同样的处理。为了正确地将标题居中，我忘记设置了什么？

顺晟科技：

默认情况下，浏览器向元素添加左填充，这会将列表的内容推过。

最简单的解决方案是重置填充:

.grid-container {
     display: grid;
     grid-template-areas: "header menu";
     grid-template-columns: repeat(8, 1fr);
}

.header {
    grid-area: header;
    grid-column: span 7;
    margin: 2px;
    background-color: black;
}

.nav-test {
     display: flex;
     direction: row;
     justify-content: space-around;
     list-style-type: none;
}

.nav-test a {
    color: white;
 }

.menu {
    display: flex;
    grid-area: menu;
    grid-column: span 1;
    margin: 2px;
    background-color: black;
}

如果您去检查导航测试容器，您将看到容器左侧有一个额外的40px填充。这就是链接不居中的原因。要解决这个问题，只需在nav-test类中添加。试着运行这个代码片段，看看这是否能解决问题。

正如您所看到的，您的导航有一些标记，这些标记位于父标记中，因此您可以在父元素集中和或将每个元素居中放置在导航栏中