使用 align-items: baseline 可实现标题与图标文字基线对齐，原理是让 Grid 子元素按文本基线（如字母 x 底部）对齐，解决因字号或行高差异导致的视觉错位。需确保元素包含内联内容以形成基线，纯图标可添加隐藏文本或伪元素辅助，IE 支持有限，现代浏览器适用，也可用 align-self: baseline 局部调整。
在使用 CSS Grid 布局时，若想让标题（如 h1、h2）与旁边的图标（例如 Font Awesome 图标或 SVG）实现文字基线对齐，可以利用 align-items: baseline 或 align-self: baseline 来达到视觉上更协调的效果。
标题与图标基线对齐的原理
文字的“基线”（baseline）是指字母如 "x"、"a"、"o" 的底部所对齐的那条线。不同字体大小或行高的元素，默认垂直对齐方式是 stretch 或 start，这会导致小图标与大标题看起来“错位”。通过设置 align-items: baseline，可以让 Grid 容器内的子元素按照文字基线对齐，从而让图标和标题中的文字看起来在同一水平线上。
使用 align-items: baseline 实现对齐
确保 Grid 容器设置了 display: grid，并启用基线对齐：
.header {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline; /* 关键：按基线对齐 */
gap: 8px;
}
.icon {
font-size: 16px; /* 图标较小 */
}
.title {
font-size: 24px; /* 标题较大 */
margin: 0;
}
HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class="header"> <i class="icon">?</i> <h2 class="title">销售报表</h2> </div>
此时，尽管图标和标题字号不同，它们的文字部分会按基线对齐，视觉上更自然。
注意事项与兼容性
使用 baseline 对齐时需注意以下几点：
- 所有参与对齐的子元素必须是行内内容（inline content），且具有可识别的基线，比如文本或内联块元素。
- 如果某个子元素是纯图标且无文字内容，建议为其添加一个不可见的文字（如
aria-hidden的占位符）或使用伪元素来确保基线存在。 - 对于
input、button等替换元素，其基线行为可能与普通文本不同，需测试实际效果。 - IE 对
align-items: baseline支持有限，现代浏览器中表现良好。
进阶技巧：局部调整对齐方式
如果只想让特定项目使用基线对齐，其他保持默认，可用 align-self 单独控制：
.title {
align-self: baseline;
}
.icon {
align-self: baseline;
}
这样即使容器用的是 center 或 start，也可为个别元素启用基线对齐。
基本上就这些。只要确保元素包含文本内容或能产生基线，align-items: baseline 就能有效解决标题与图标不对齐的问题，让界面更精致。
