如何实现含文本图标的菜单栏与外部购物车图标垂直对齐？

要实现.main-navigation和.site-header-cart的垂直对齐，且不依赖字体大小、行高这类属性，最通用的方案是利用Flexbox的交叉轴对齐属性，具体步骤如下：

核心修改 #

你的父容器.header-navigation已经设置了display: flex，只需要给它添加align-items: center属性，就能让内部所有子元素自动在垂直方向居中对齐：

.header-navigation {
  display: flex;
  align-items: center; /* 新增这一行 */
}

方案优势 #

• Flexbox的align-items: center会让容器内的子元素在垂直方向上居中，完全不依赖元素的内部属性（字体大小、行高、内边距）。
• 不管后续菜单栏或购物车图标内部元素高度变化（比如图标尺寸调整、徽章样式修改），垂直对齐效果都会自动保持，不需要手动调整内边距或其他偏移值。

完整修改后的关键CSS代码 #

.header-navigation {
  display: flex;
  align-items: center; /* 新增垂直居中属性 */
}

/* 其余原有样式保持不变 */
* {
  box-sizing: inherit;
}

body {
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 2;
}

/* ... 其余原有样式无需变动 */

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