通过设置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 继承父级。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

建议做法：

• 设置文字元素的 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，再处理好图标元素的显示模式，图标与文字就能精准对齐。