用Flexbox对齐列表图标和文字，需将li设为flex容器并设置align-items:center；再通过margin-right或gap控制间距，统一图标尺寸并添加flex-shrink:0，确保结构扁平。

用 Flexbox 对齐列表图标和文字，关键在于把每项（li）设为 flex 容器，并统一控制子元素（图标 + 文字）的对齐方式。不是给图标加 vertical-align 或拼命调 margin，而是让布局本身具备弹性对齐能力。

给列表项启用 Flex 布局

默认 li 是块级元素，内部图标（如 i、svg 或伪元素）和文字是行内流，容易因字体基线、行高差异错位。直接让 li 变成 flex 容器：

• 给 ul li 设置 display: flex; align-items: center;
• align-items: center 会让图标和文字在交叉轴（垂直方向）居中对齐，不受字体影响
• 避免只给图标加 vertical-align: middle —— 它依赖父元素行高，不稳定

控制图标与文字间距

对齐之后，图标和文字之间常太挤或太松。用 flex 的间隙控制更可靠：

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

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

下载

• 给图标加 margin-right: 8px;（推荐），或用 gap: 8px;（需父容器是 flex 且仅两个子元素时效果最稳）
• 如果图标是伪元素（::before），确保它被包含在 flex 容器内（比如写在 li 上，而不是 a 内部再套一层）
• 避免用   或空 span 调间距 —— 语义不清，维护困难

处理不同尺寸图标的兼容性

SVG、字体图标、图片图标大小不一，容易拉高行高。Flex 能自动协调：

立即学习“前端免费学习笔记（深入）”；

• 给图标统一设 font-size（字体图标）或 width/height（SVG/图片），再配合 flex-shrink: 0 防止被压缩
• 文字部分可加 flex: 1; 占满剩余空间，适合带描述的长文本
• 若图标过大导致整体高度不均，检查是否意外设置了 line-height 在父级上，flex 下它通常无需设置

不复杂但容易忽略：flex 对齐的前提是图标和文字处于同一级 DOM 结构中，别让图标藏在多层嵌套里。保持结构扁平，对齐就自然稳定了。