如何在CSS导航菜单中垂直对齐Material/FontAwesome图标？

问题描述 #

导航菜单使用Material和FontAwesome图标时，图标与锚文本无法垂直对齐：设置图标为目标字号时，图标位置偏高；调整padding、margin等属性会带动整个锚标签移动，无法单独调整图标位置。目前用缩小图标字号后通过transform: scale()放大的临时方案，想找更直接的解决方法。

可行解决方案 #

方法1：用Flex布局实现锚标签内元素垂直居中

这是最直观的方案，通过修改锚标签的布局方式，让内部所有元素自动垂直对齐：

修改#nav a.level1的CSS属性，移除float: left，改用flex布局并开启垂直居中：

#nav a.level1 {
  font-family: "Poppins", Verdana, Arial, sans-serif;
  color: #555;
  display: flex; /* 改为flex布局 */
  align-items: center; /* 强制子元素垂直居中 */
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
  margin-right: 50px;
  text-align: center;
  text-decoration: none;
  outline: none;
  padding: 10px 13px 9px;
  /* 移除float: left */
}

然后直接设置图标为目标字号，不需要再用transform: scale()：

#nav a.level1 i {
  font-size: 26px;
  font-weight: 600;
  color: #555;
  margin-left: 15px;
}

#nav li a span.material-icons,
#nav li a span.material-icons-outlined {
  margin-right: 15px;
  font-size: 26px; /* 直接设置想要的大小 */
}

方法2：利用vertical-align对齐行内元素

图标属于行内元素，通过设置vertical-align: middle让其与文本基线对齐，若有细微偏差可微调位置：

#nav a.level1 i,
#nav li a span.material-icons,
#nav li a span.material-icons-outlined {
  vertical-align: middle;
  /* 若仍有错位，可加微调：
  position: relative;
  top: 1px; */
}

方法3：匹配图标与父元素的行高

锚标签#nav a.level1的行高是30px，让图标继承或设置相同行高，实现对齐：

#nav a.level1 i,
#nav li a span.material-icons,
#nav li a span.material-icons-outlined {
  line-height: 30px; /* 和父元素行高一致 */
}

原理说明 #

之前的错位问题源于：锚标签用float: left时，内部行内元素的基线对齐规则导致图标和文本的视觉中心不一致。以上三种方法都能直接修正对齐逻辑，无需依赖缩放的临时方案。

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