如何在 HTML 标题（h1）中精准垂直居中 SVG 图标

本文详解如何利用 Flexbox 布局，使内联 SVG 图标在单行或多行标题中始终垂直居中对齐，解决 vertical-align: middle 失效、基线偏移、响应式错位等常见问题，并提供语义清晰、可复用的纯 CSS 方案。

本文详解如何利用 flexbox 布局，使内联 svg 图标在单行或多行 `

` 标题中始终垂直居中对齐，解决 `vertical-align: middle` 失效、基线偏移、响应式错位等常见问题，并提供语义清晰、可复用的纯 css 方案。

在 Web 开发中，将 SVG 图标与标题文字并排显示且垂直居中，看似简单，实则极易踩坑。你可能已尝试过 vertical-align: middle，却发现它对 vertical-align 仅作用于 inline 或 inline-block 元素，且其对齐基准是父容器的 行框（line box）基线，而非视觉中心。当

包含多行文本时，行高动态变化，基线位置漂移，图标自然“忽上忽下”。

真正可靠、现代且语义友好的解法，是将

自身设为 Flex 容器：

h1 {
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between; /* 文字左对齐，图标右对齐 */
  align-items: center;             /* 关键：交叉轴（垂直方向）居中 */
  gap: 1em;                        /* 替代 margin，间距更可控、无折叠风险 */
  margin: 0;                       /* 重置 h1 默认 margin，避免干扰布局 */
}

<h1>
  Heading 1
  <svg width="24" height="24" viewbox="0 0 24 24" class="indicator"><path d="m16.01 7.43-1.4-1.41L9 11.6 3.42 6l-1.4 1.42 7 7 7-7Z" fill="currentColor"></path></svg>
</h1>

<h1>
  The quick brown fox jumps over the lazy dog
  <svg width="24" height="24" viewbox="0 0 24 24" class="indicator"><path d="m16.01 7.43-1.4-1.41L9 11.6 3.42 6l-1.4 1.42 7 7 7-7Z" fill="currentColor"></path></svg>
</h1>

✅ 为什么此方案稳健有效？