align-items: baseline 仅对含文本基线的元素生效；img/svg等无内联文本时失效，需包裹span、伪元素插入零宽空格或改用align-self: baseline/subgrid/vertical-align等替代方案。
align-items: baseline 为什么只对部分元素生效
基线对齐不是万能的——align-items: baseline 要求子元素**有可识别的文本基线**，纯 <img> 或 <svg></svg> 默认没有内联文本内容，浏览器无法计算其基线位置，结果就是图标“悬空”或贴顶对齐。
常见错误现象：.title 和 .icon 同在 grid 容器里，加了 align-items: baseline 却毫无变化；或者图标忽高忽低，随字体加载顺序抖动。
- 给图标包裹一层
<span></span>并添加不可见文本（如<span aria-hidden="true"></span>），触发基线生成 - 用伪元素辅助：在
.icon::before中插入零宽空格\200b，不占视觉空间但参与基线计算 - 确保父容器未设置
font-size: 0或line-height: 0，否则基线锚点会丢失
grid-template-rows + align-self: baseline 的组合更可控
当标题和图标分属不同网格行（比如标题占第1行、图标占第2行），align-items 失效，此时必须用 align-self: baseline 单独控制图标所在单元格的对齐行为。
使用场景：响应式布局中图标需换行到标题下方，或图标作为独立网格项参与多行布局时。
- 父容器需显式定义行轨道，例如
grid-template-rows: auto auto，否则align-self在隐式行中无参照 -
align-self: baseline只对块级元素内的内联内容起作用，若图标是display: block，需额外设display: inline-block - IE 不支持
baseline值，现代项目可忽略，但若需兼容旧版 Edge，建议降级为align-self: center+ 手动margin-top微调
subgrid 是解决嵌套对齐断裂的终极方案
当图标和文字被包在不同层级组件里（比如 <header></header> → <nav></nav> → <item></item>），Grid 上下文断裂，baseline 对齐链就断了。这时靠层层加 align-self 很难稳定。
subgrid 让子容器直接继承父级的行轨道定义，图标和文字哪怕在不同 DOM 深度，也能锚定到同一行基线上。
- 父容器必须明确定义
grid-template-rows（不能只用auto-rows） - 中间层组件需同时声明
display: grid和grid-template-rows: subgrid - 图标元素直接用
grid-row: 1锚定到标题所在行，不再依赖基线计算逻辑
text-align + line-height 配合 grid 是最稳的兜底策略
基线对齐本质是排版细节，一旦字体加载延迟、字号动态变更或图标尺寸由 JS 控制，baseline 就容易失准。真正可靠的对齐，往往来自更底层的盒模型控制。
- 把图标设为
vertical-align: middle，并确保父元素有明确line-height（比如line-height: 1.4），文字与图标按中线对齐 - 标题容器加
text-align: center控制多行文字水平居中，避免换行后左右偏移 - 如果图标是 SVG，优先用
height: 1em和vertical-align: -0.125em这类相对单位微调，比像素值更适应字号变化
复杂点在于：基线对齐的“基准”本身是字体特性，不同字体的 x-height 差异可能达 20%，所以不要指望一套 CSS 在所有字体下都完美——先锁定主字体，再做对齐，比盲目堆属性更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
