通过设置align-items: center使图标与文字垂直居中对齐，统一line-height为容器高度确保文本居中，调整图标display为block或vertical-align: middle避免基线偏差，最终实现精准对齐。
图标与文字在弹性盒子（Flexbox）中对齐不准，通常是因为图标的行高、字体基线或容器的对齐方式未统一。通过合理设置 align-items 和 line-height，可以有效解决这一问题。
1. 使用 align-items 控制垂直对齐
确保父容器使用 Flex 布局，并设置 align-items: center，使图标和文字在交叉轴上居中对齐。
示例：
.container {
display: flex;
align-items: center; /* 垂直居中 */
height: 40px; /* 设置固定高度便于观察 */
}
2. 统一 line-height 保证文本垂直居中
如果文字没有正确垂直居中，可能是因为其 line-height 与容器高度不一致。将文字的 line-height 设为与容器高度相同，或使用 inherit 继承父级。
建议做法：- 设置文字元素的 line-height 等于容器高度
- 或设置 line-height: inherit，让其继承父容器的 line-height
.text {
line-height: 40px; /* 与容器高度一致 */
}
/* 或 */
.container {
line-height: 40px;
}
.text {
line-height: inherit;
}
3. 注意图标本身的显示方式
图标如果是图片或使用伪元素生成，需注意其 display 和 vertical-align 属性。
立即学习“前端免费学习笔记（深入）”；
- 图片默认是 inline 元素，底部会留出空白（基线对齐），可设为 display: block 或 vertical-align: middle
- 使用 Font Icon 时，确保 font-size 和 line-height 与其他文本一致
.icon img {
display: block;
}
/* 或 */
.icon img {
vertical-align: middle;
}
基本上就这些。结合 align-items: center 和统一的 line-height，再处理好图标元素的显示模式，图标与文字就能精准对齐。
