Navbar样式被覆盖，导航项居中失效问题求助

我来帮你搞定这个导航项居中的麻烦！你遇到的问题大概率是全局样式污染或者当前样式的优先级/属性设置不到位导致的，咱们一步步来排查修复：

一、先排查样式覆盖的根源 #

打开浏览器开发者工具（按F12），选中你的nav__item元素，切换到Computed标签页，看看哪些属性被划掉了（这就是被其他样式覆盖的证据）；再切换到Styles标签页，就能看到所有作用在这个元素上的样式来源——包括全局的li样式或者其他组件的CSS，这比瞎加!important靠谱多了。

二、针对性修复样式 #

结合你的代码，我调整了CSS，解决垂直居中+提升样式优先级的问题：

修改后的CSS代码 #

@import '../../theme.css';

/* 先重置ul和li的默认样式，避免浏览器默认样式干扰 */
.nav__routes, .nav__item {
  margin: 0;
  padding: 0;
}

.nav-container {
  display: flex;
  width: 100%;
  height: 70px;
  align-items: center;
  justify-content: space-between;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: 1.2rem;
  top: 0;
}

.nav__routes {
  display: flex;
  align-items: center;
  list-style: none;
}

/* 用更具体的选择器提升优先级，避免被全局样式覆盖 */
.nav-container .nav__routes .nav__item {
  height: 70px;
  border-bottom: 2px solid transparent;
  padding: 0 30px;
  /* 关键：用line-height和容器高度一致，实现文字垂直居中 */
  line-height: 70px;
  /* 确保文字水平居中 */
  text-align: center;
}

.nav-container .nav__routes .nav__item:hover {
  border-bottom: 4px solid var(--secondary-color);
}

三、为什么之前的代码不行？ #

1. 全局样式干扰：浏览器默认给ul加了padding-left，给li加了默认的margin，这些会破坏布局；如果你的项目里有全局的li样式（比如设置了display:block或者其他对齐属性），也会覆盖你的自定义样式。
2. 垂直居中没到位：虽然nav-container和nav__routes设置了align-items:center，但nav__item自身高度是70px，文字默认是基线对齐，需要用line-height:70px来让文字垂直居中。
3. 样式优先级不够：单独的.nav__item选择器优先级可能低于全局的li选择器（比如如果全局用了body li这种更具体的选择器），所以用嵌套的选择器.nav-container .nav__routes .nav__item能提升优先级，不用依赖!important。

按照这个修改后，你的Home、About、FAQ应该就能和Logo一样完美居中啦！

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