如何用Flexbox居中列表项？导航栏列表居中异常求助

我来帮你搞定这个导航栏的居中难题！

问题根源 #

你当前的代码里，#navbar设置了justify-content: center，这个属性会让导航栏内的两个子元素（.logo和ul）整体居中对齐，直接导致ul的margin: 0 auto完全失效——因为容器已经通过justify-content分配了空间，ul没有多余的可用空间来实现自动居中了。

修复方案 #

只需要做1个关键调整，再优化几个冗余细节：

1. 移除#navbar中的justify-content: center，让默认的flex-start生效，确保左侧的.logo靠左排列；
2. 保留ul的margin: 0 auto，它会自动在导航栏剩余的空间里居中；
3. 去掉#navbar里多余的flex: 1（width: 100%已经让导航栏占满宽度）；
4. 修正li的padding，避免上下内边距超出导航栏高度。

修改后的完整代码 #

HTML

<nav id="navbar">
  <div class="logo">
    <h1>Welcome</h1>
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

* { 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
}
body { 
  font-family: 'Open Sans', sans-serif; 
  background: #fff; 
  color: #333; 
  line-height: 1.6; 
  background: url('/img/showcase.jpg'); /* 修正原路径里重复的.jpg后缀 */
}
#navbar { 
  display: flex; 
  align-items: center; 
  top: 0; 
  width: 100%; 
  height: 60px; 
  background-color: rgba(10, 10, 10, 0.5); 
}
#navbar ul { 
  display: flex; 
  justify-content: space-around; 
  text-align: center; 
  margin: 0 auto; 
  padding: 0;
  width: 50%; /* 可选：给ul设置固定宽度，让内部列表项的间距更均匀 */
}
#navbar li { 
  list-style: none; 
  padding: 0 20px; /* 只保留左右内边距，避免超出导航栏高度 */
}
#navbar a {
  color: #fff; /* 可选：给链接加白色，适配深色导航栏 */
  text-decoration: none;
}

效果说明 #

修改后，.logo会固定在导航栏左侧，ul则会在导航栏的水平中间位置排列；同时ul内部的列表项通过justify-content: space-around保持横向均匀分布，完全符合你想要的布局效果。

内容的提问来源于stack exchange，提问作者Akın Uçar