导航栏两侧菜单项数量不均时，如何居中Logo？

嘿，我来帮你搞定这个Logo居中的问题！你遇到的核心问题是左右菜单项数量不一样，直接用justify-content:center没法让Logo精准居中对吧？咱们换个思路，把导航栏拆成三个弹性容器，就能完美解决啦。

核心思路 #

把nav分成三个部分：左侧菜单项容器、Logo、右侧菜单项容器，给这三个容器都设置flex:1。这样左侧和右侧容器会自动平分nav的剩余空间，不管两边菜单项数量多少，Logo都会稳稳地居中在页面正中间。

修改后的代码 #

HTML结构 #

<nav>
  <div class="nav-left">
    <a href="#">Menu icon</a>
    <a href="#">Search icon</a>
    <a href="plan.html">Plan Your Trip</a>
    <a href="experience.html">Experience</a>
  </div>
  <a href="index.html" id="logo">mifestival</a>
  <div class="nav-right">
    <a href="tickets.html">Tickets</a>
    <a href="line-up.html">Line-Up</a>
  </div>
</nav>

CSS样式 #

nav{
  display:flex;
  width:100%;
  height:20%;
  background:#eee;
  align-items:center;
  /* 去掉原来的justify-content:center，让三个子容器自动分配空间 */
}

/* 左右容器设置flex:1，平分剩余空间 */
.nav-left, .nav-right {
  flex:1;
  display:flex;
}

/* 左侧菜单项靠左对齐 */
.nav-left {
  justify-content:flex-start;
}

/* 右侧菜单项靠右对齐 */
.nav-right {
  justify-content:flex-end;
}

nav a {
  text-decoration:none;
  color:black;
  margin: 0 30px;
  /* 确保菜单项垂直居中 */
  align-self:center;
}

#logo{
  width: 200px;
  height:100%;
  background:rgb(126, 232, 163);
  /* 让Logo内部文字居中 */
  display:flex;
  align-items:center;
  justify-content:center;
}

关于导航项使用<a>标签的疑问 #

完全可以用普通的<a>标签来做导航项，根本不需要改成按钮！按钮（<button>）更多是用于表单提交、触发JS交互这类场景，而导航链接本来就是<a>标签的本职工作，只要样式调整到位，体验和按钮完全一样，甚至更符合语义化标准。

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