如何实现Header导航栏文本的垂直对齐？

你的问题出在当前用float布局<li>元素，导致之前尝试的垂直对齐设置没起作用。这里给你两种实用的解决方法：

方法一：用Flexbox重构导航（推荐，现代布局方案） #

直接把<ul>改成flex容器，既能轻松实现水平+垂直居中，还不用依赖float：

修改后的CSS代码：

body>header>nav>ul {
  display: flex; /* 改成flex容器 */
  background-color: rgb(0, 0, 255);
  height: 30px;
  align-items: center; /* 垂直居中 */
  justify-content: space-around; /* 均匀分布li，替代float */
  padding: 0; /* 清除默认ul内边距 */
  margin: 0; /* 清除默认ul外边距 */
}

body>header>nav>ul>li {
  flex: 1; /* 让每个li平分宽度，替代固定width */
  list-style: none; /* 清除默认li圆点 */
  font-size: 0.8em;
  color: rgb(183, 156, 111);
  font-weight: bold;
  text-align: center;
}

a {
  color: white;
  text-decoration: none; /* 可选：去掉链接下划线 */
}

这样<li>里的文本会自动垂直居中，同时水平分布更均匀，也避免了float带来的布局问题。

方法二：基于现有float布局的快速修复 #

如果不想改布局，直接给<li>设置line-height等于导航栏高度（30px），就能让文本垂直居中：

修改<li>的CSS：

body>header>nav>ul>li {
  display: block;
  width: 12%;
  float: left;
  font-size: 0.8em;
  color: rgb(183, 156, 111);
  font-weight: bold;
  height: 100%;
  text-align: center;
  line-height: 30px; /* 新增：行高等于导航高度 */
}

另外要注意清除<ul>的默认内边距和外边距，避免导航栏出现多余空白：

body>header>nav>ul {
  display: block;
  background-color: rgb(0, 0, 255);
  height: 30px;
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
}

两种方法都能解决你的垂直对齐问题，优先推荐Flexbox方案，后续维护和扩展更方便。

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