用flex最稳：给button设display: flex和align-items: center可绕过vertical-align: baseline陷阱，svg与文字自动垂直居中；需配合gap控制间距、显式声明svg宽高及viewbox，并移除所有vertical-align设置。
SVG图标在按钮里垂直居中用flex最稳
按钮内 SVG 和文字一高一低，本质是 vertical-align: baseline 在捣鬼，不是尺寸没调好。直接给 <button></button> 加 display: flex 和 align-items: center 就能绕过所有基线计算陷阱。
实操建议：
-
<button></button>本身设display: flex; align-items: center; gap: 0.5em（gap比margin更可靠，不会和文字换行冲突） -
<svg></svg>不用设vertical-align，删掉所有内联style中的对齐声明 -
<svg></svg>的width和height推荐用rem或em，比如width="1.2em"，随按钮字体缩放 - 若图标需固定尺寸（如 16×16px），加
flex-shrink: 0防窄屏下被压缩
SVG在表格单元格里底部悬空怎么修
表格里 <svg></svg> 总在底部空一截，是因为 display: inline 默认按文字基线对齐，而 SVG 原点不贴合基线。不能靠调 line-height 硬凑，得改渲染模式。
实操建议：
- 给
<svg></svg>加style="display: inline-block; vertical-align: middle;" - 同时确保父级
<td> 有 <code>vertical-align: middle（否则无效） - 或者更彻底：设
display: block; margin: 0 auto;，适合单图标居中场景 - 必须声明
viewBox属性，否则缩放行为不可控；禁用内联width/height+style混用，易触发浏览器解析冲突 -
<svg></svg>标签上不要设fill或stroke内联样式 - 所有子图形（
<path></path>、<circle></circle>等）用fill="currentColor" - 给父容器（如
<button></button>或<h2></h2>）设color，例如color: #e74c3c; - 禁用态直接用
:disabled { color: #999; }，图标自动响应 - 把
display: flex和align-items: center加到标题标签本身（如<h1 class="heading-with-icon"></h1>） -
<svg></svg>放在文本节点同级，不要套<span></span>或<div> 包裹 <li>用 <code>gap控制间距，避免margin-right在换行时导致图标错位 - 如果图标需右对齐（如带箭头的标题），加
justify-content: space-between，不用float或position: absolute
真正容易被忽略的是 viewBox —— 没它，SVG 就不是矢量，缩放会糊或拉伸；写了但父容器没设宽高约束，它又可能撑爆布局。这两点必须同时满足，居中才真正可控。
SVG图标颜色怎么随文字自动变
写死 fill="#333" 会导致换主题色时全量改 HTML，且禁用态无法同步灰掉。正确做法是让 SVG “继承”父级文字色。
实操建议：
多行标题里SVG始终锚定文本视觉中心
vertical-align: middle 在多行 <h1></h1> 里基本失效——它对齐的是行框基线，不是文本块的几何中线。Flex 是唯一能跨单行/换行保持一致的方案。
实操建议：
