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