如何实现导航栏（navbar）元素居中？求助排查CSS问题

导航栏元素无法居中，推测问题出在CSS中，但没能定位错误。尝试过多种CSS属性组合实现居中，也检查了是否有其他代码干扰HTML元素属性，均未解决。相关代码如下：

CSS代码 #

li {
  list-style: none;
}

p,
ul {
  margin: 0;
  padding: 0;
}

div,
li {
  box-sizing: border-box;
}

.header_nav {
  background: linear-gradient(90deg, #fff 20%, rgba(0, 0, 0, .6) 60%);
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: stretch;
  position: fixed;
  top: 0;
  width: 100%;
}

.global_nav_item {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.global_nav_item:hover {
  background: #fff;
  color: #42210b;
}

.global_nav {
  display: flex;
  align-items: stretch;
}

.logo {
  width: 120px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 100%;
}

.section_inner {
  padding: 50px 10% 30px;
}

.key {
  height: 500px;
  background: center / cover no-repeat url("https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_key.jpg");
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
}

.key h1 {
  font-size: 2.5rem;
}

.visual-key h1,
.visual-key p {
  margin-top: 80px;
  text-align: left;
}

#menu {
  background: center / cover no-repeat url("https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_menu_bg.jpg");
  background-attachment: fixed;
  background-position: center bottom;
}

HTML代码 #

<header>
  <nav class="header_nav">
    <a href="index.html" class="logo"><img src="https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_logo_k.png"></a>
    <ul class="global_nav">
      <a href="index.html" class="global_nav_item">
        <li>Home</li>
      </a>
      <a href="#menu" class="global_nav_item">
        <li>Menu</li>
      </a>
      <a href="contact.html" class="global_nav_item">
        <li>Contact</li>
      </a>
    </ul>
  </nav>
  <div class="key section_inner visual-key">
    <h1>DIC Coffee</h1>
    <p>natural organic cafe</p>
  </div>
</header>

问题分析与解决方案 #

1. 核心样式问题 #

当前.header_nav设置了justify-content: space-between，这个属性会让它的两个子元素（logo和导航菜单）分别靠向容器的左右两端，这就是导航元素没有居中的直接原因。

2. HTML结构规范问题 #

你的HTML结构不符合标准：<ul>的直接子元素必须是<li>，但你用<a>直接包裹了<li>，结构错误可能导致样式异常。修正后的HTML结构如下：

<ul class="global_nav">
  <li>
    <a href="index.html" class="global_nav_item">Home</a>
  </li>
  <li>
    <a href="#menu" class="global_nav_item">Menu</a>
  </li>
  <li>
    <a href="contact.html" class="global_nav_item">Contact</a>
  </li>
</ul>

3. 居中方案选择 #

根据需求，提供两种常见的居中实现方式：

方案一：整个导航栏内容（logo+菜单）在页面水平居中

给.header_nav添加固定宽度和自动外边距，同时保留logo与菜单的左右分布：

.header_nav {
  background: linear-gradient(90deg, #fff 20%, rgba(0, 0, 0, .6) 60%);
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: stretch;
  position: fixed;
  top: 0;
  width: 90%; /* 或设置固定值如1200px */
  max-width: 1200px; /* 限制最大宽度 */
  left: 0;
  right: 0;
  margin: 0 auto; /* 水平居中容器 */
}

方案二：导航菜单在自身容器内居中，且logo与菜单整体居中

修改.header_nav的对齐方式，给子元素添加间距：

.header_nav {
  background: linear-gradient(90deg, #fff 20%, rgba(0, 0, 0, .6) 60%);
  display: flex;
  height: 60px;
  justify-content: center; /* 让子元素整体居中 */
  gap: 40px; /* 给logo和菜单添加间距 */
  align-items: stretch;
  position: fixed;
  top: 0;
  width: 100%;
}

.global_nav {
  display: flex;
  align-items: stretch;
  justify-content: center; /* 菜单内部项居中 */
}

内容的提问来源于stack exchange，提问作者mathi forcado