答案：使用CSS网格布局时，文字与图片对齐不准主要因基线差异导致，通过设置align-items: center和justify-items统一对齐基准，并重置margin、line-height等干扰因素，可有效解决错位问题。
在使用CSS网格布局时，文字和图片对齐不准是常见问题。虽然网格系统提供了强大的对齐控制能力，但文字的基线（baseline）和图片的默认对齐方式可能导致视觉错位。通过合理使用 align-items 和 justify-items，可以有效解决这类问题。
理解对齐行为差异
文字元素默认按基线对齐，而图片作为替换元素，默认垂直对齐方式为基线或底部，这会导致与文字不在同一水平线上。即使它们处于同一个网格单元格中，也会出现上下偏移。
解决的关键是统一对齐基准：
- 设置 align-items: center 可让内容在交叉轴上居中对齐
- 使用 justify-items: center 控制主轴方向的对齐方式
- 将图片设置为 vertical-align: middle 或使用 display: block 消除基线影响
统一网格项对齐方式
在网格容器上设置全局对齐属性，确保所有子元素遵循一致规则：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center; /* 垂直居中 */
justify-items: start; /* 水平左对齐，可按需调整 */
}
这样所有直接子元素都会在单元格内居中对齐，避免因默认行为不同导致的错位。
针对特定项目微调
如果某些项目需要特殊处理，可在子元素上单独设置对齐方式：
- 对图片添加 align-self: center 强制垂直居中
- 对文字使用 justify-self: center 调整水平位置
- 设置图片 width: 100% 或固定尺寸，避免撑开网格
例如：
.grid-image {
align-self: center;
justify-self: center;
}
消除默认间距干扰
文字和图片可能因默认 margin、line-height 或字体差异产生额外空间。建议：
- 重置图片的 margin：设置 margin: 0
- 统一行高：line-height: 1 或具体数值
- 检查父容器是否有 padding 影响布局
基本上就这些。关键是统一对齐基准，配合 align-items 和 justify-items 控制整体行为，再用 align-self 等微调个别元素。不复杂但容易忽略细节。
