多行文本与图标垂直对齐应将整段文字块和图标作为同一Flex项目整体居中，使用align-items: center；需确保父容器为flex容器、不额外嵌套div、清除文字margin、统一line-height、图标用em单位并设flex-shrink: 0。
多行文本和图标垂直对齐，关键不是让每行文字单独居中，而是把“整段文字块”和图标一起当作 Flex 项目，在交叉轴上整体居中。用 align-items: center 即可，但必须注意容器结构和文字本身的排布方式。
确保父容器是 flex 容器且方向正确
把图标和文字（无论单行或多行）包裹在同一个父元素里，设为 display: flex，默认主轴是水平方向，交叉轴就是垂直方向——这正是我们对齐的轴线。
- 不要给图标或文字额外套
<div>，直接放<svg>和<p>或<span>即可 - 如果文字本身是多行（比如用了
<p>或设置了width+word-break），它会自然形成一个块级内容框，Flex 会把它当成一个整体来居中 - 避免父容器有
float、position: absolute或其他覆盖 display 的样式；必要时可用display: flex !important临时验证
控制文字块内部行高与换行行为
多行文字若出现上下留白不均、视觉偏移，往往是因为 line-height 或 margin 干扰了内容框高度。Flex 居中依据的是整个元素的内容框（content box）中心，不是行基线。
- 给文字容器（如
<p>）设置margin: 0，避免外边距影响整体尺寸 - 统一使用
line-height: 1.4这类无单位值，让它随字体缩放，避免固定像素导致错位 - 需要防止单词断开或强制换行时，用
word-break: break-word或overflow-wrap: break-word
图标尺寸与缩放要匹配文字流
SVG 或 inline 图标如果用固定像素（如 width: 24px），在字号变化时容易脱节；推荐用相对单位保持比例一致。
立即学习“前端免费学习笔记（深入）”；
- 设图标
width: 1.2em、height: 1.2em，让它随父级字体大小等比缩放 - 对 SVG，加
flex-shrink: 0防止窄屏下被压缩变形 - 用
fill: currentColor让图标颜色自动继承文字色，提升可访问性
避免 align-items:center 在多行场景下的常见误解
有人以为 align-items: center 会让每行文字都居中对齐图标，其实它只作用于 Flex 项目的交叉轴位置——也就是把图标和整个文字块的中心点对齐。如果你需要“图标对齐第一行文字的中线”，那属于更精细的排版需求，通常需改用 CSS Grid 或微调 margin-top，但会牺牲健壮性。
- 多行文字 + 图标 → 推荐方案就是整体居中，视觉效果稳定、代码简洁
- 若必须逐行对齐（如列表项中图标紧贴每行首字），应把每行拆成独立 flex 项，或改用
display: grid配合align-items: start - 不用
vertical-align：它对块级多行内容无效，且受字体度量干扰严重
