关键是要将图标和多行文本容器作为同级子元素置于同一flex容器中，设display: flex和align-items: center实现整体垂直居中，用gap控制间距，避免inline干扰和多余嵌套。
用 Flex 容器包裹图文整体
多行文本和图标要对齐，关键不是分别调各自位置，而是把它们当成一个整体来布局。必须让图标和包含多行文本的容器（比如 div 或 span）成为同一个 Flex 容器的直接子元素。
常见错误是把图标和文字都写在一行里，例如：
标题
副标题
这样浏览器会把换行符、空格和文字块混合解析，导致 Flex 无法准确识别结构。正确做法是显式包裹文本：
- 用 div 包住所有文本内容（哪怕只有两行），确保它是 Flex 容器的直系子项
- 图标也作为同级子项，不嵌套在文本容器内
- 避免中间插入无关标签或空白字符干扰 Flex 子项数量
设置 align-items: center 实现垂直居中
Flex 容器设为 display: flex 后，align-items: center 会让图标和整个文本块在交叉轴（垂直方向）上按视觉中心对齐——不是按第一行基线，也不是按最后一行，而是按文本块的整体高度中心点。
这个属性对多行文本特别有效，它绕过了 vertical-align 和 line-height 的局限性，不受字体、字号、行高变化影响。
示例 CSS：
- display: flex —— 启用弹性布局
- align-items: center —— 垂直居中核心声明
- gap: 0.75rem —— 控制图标与文本块间距，比 margin 更干净
文本容器无需额外对齐或 line-height
被包裹的多行文本容器（如 .text-block）本身不需要设 display: flex、line-height 或 vertical-align。它的作用只是语义化分组，样式由外层 Flex 容器统一控制。
如果文本内部有标题+描述等不同层级，可放心使用 h3、p 等原生标签，Flex 不会因此错位——只要它们都在同一个子容器内。
补充建议：
- 给图标加 height: auto 和明确的 width，防止拉伸变形
- 确保图标有 alt 属性，提升可访问性
- 若需响应式缩放，用 rem 或 em 单位定义 gap 和尺寸
避免常见干扰因素
即使用了 Flex，对齐仍失效，往往是因为上下文被破坏：
- 父容器设置了 overflow: hidden 或 transform，可能触发新格式化上下文，影响对齐计算
- 图标或文本块外层多了一层未察觉的 inline 元素（比如空格、注释、span）
- 使用了 float、position: absolute 或旧式 display: table-cell 混合布局
- 在按钮等交互元素中，内部嵌套了 strong、em 等强调标签却未重置 display 类型
