如何让导航栏列表文字与中间心形logo垂直居中对齐

现有代码中<li>设置为display: inline，不支持内部元素的垂直对齐控制，同时行内图片默认和文字基线对齐，是导致错位的核心原因。

你只需要修改对应CSS规则即可，无需调整HTML结构：

/* 替换原有header ul、header li的样式 */
header ul {
  margin: 0;
  padding: 0 0 20px 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

header li {
  height: 30px;
  display: flex;
  align-items: center;
}

/* 补充图片对齐规则，避免异常偏移 */
header li img {
  vertical-align: middle;
}

修改后所有菜单项和中间的logo会自动沿垂直方向居中对齐，和你PS制作的期望效果一致。如果需要调整菜单项之间的距离，直接修改gap的数值即可，比原方案给li加左右padding更易维护。

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