如何将header中的SVG与导航栏nav元素精准对齐？

解决方案 #

核心问题是inline元素默认采用基线对齐规则，导致按钮文本与SVG底部对齐而非容器底部对齐，改用Flex布局可快速实现需求，具体修改如下：

1. 给父容器header添加Flex布局，强制子元素底部对齐
2. 调整nav为Flex布局排列按钮，消除inline元素默认的空白间隙
3. 优化按钮样式，移除height和padding的冲突属性，通过padding控制按钮高度与SVG匹配

修改后的完整CSS代码：

header {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

header img {
  width: 67vw;
}

nav {
  display: flex;
  width: 33vw;
  gap: 0.8vw;
  padding-left: 1vw;
}

nav button {
  color:#000000;
  background-color: #FFCB74;
  text-align: center;
  flex: 1;
  font-size: 1vw;
  padding: 2.6vw 0.5vw;
  border: none;
}

如果需要微调对齐精度，可以给nav添加少量正负值的margin-bottom来上下偏移，或者调整按钮的上下padding数值即可适配你的SVG高度。

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