vertical-align: middle 对 img 无效是因为它仅作用于行内级元素的行框中线而非父容器中点，受 font-size 和 line-height 干扰；正确方案需按上下文选择：按钮用 flex + align-items: center，表格单元格确保有足够高度并避免块级子元素，行内图标需脱离行内流。
为什么 vertical-align: middle 单独写在 <img> 上没反应
因为 vertical-align 只对 display 值为 inline、inline-block、inline-table 或 table-cell 的元素生效；而 <img> 默认是 inline，看似符合条件，但它的“中”指的是行框（line box）的中线，不是父容器高度中点——受父级 font-size 和 line-height 严重干扰。常见错误现象包括：图标底部留白、文字和图标错位、“像被吊着”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别只给
<img>写vertical-align: middle，必须确保它和文字处于同一行内流中 - 如果父容器里混了
<p>、<div>等块级元素，vertical-align直接失效 - 用开发者工具检查计算后的
display值，确认没被其他样式意外覆盖
按钮内图标用 align-items: center 最稳
按钮本身支持 display: flex，无需额外包裹 <div>。这是目前最可靠、响应式友好的方案，不依赖字体度量或行高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接给
<button>加display: flex和align-items: center - 用
gap: 0.5em控制图标与文字间距，比margin-left更干净，不触发外边距合并 - 图标尺寸设为
height: 1em或width: 1.2em，随字体缩放，避免固定像素值在不同字号下错位 - 若按钮含多行文字，
align-items: center会让整块内容垂直居中；如需每行单独对齐，得换display: grid或调整结构
Tooltip 图标（如 ⓘ）必须脱离行内流
行内提示图标下方出现空白，根本原因是浏览器为基线对齐预留了 descender 空间，而 ⓘ 这类符号没有下降部，视觉上就“下沉”了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把 ⓘ 单独包进一个
<span class="info"></span>，不要和文字混写在同一文本节点里 - 给
.info设display: block和line-height: 1——只有block能彻底脱离基线约束，line-height: 1消除行盒冗余高度 -
.tooltip容器本身可设display: inline-block，维持整体仍参与行内流布局 - 避免用
inline-block或flex替代block，它们仍会受行框影响，无法根治底部空白
表格单元格里 vertical-align 失效的真正原因
直接给 <td> 写 vertical-align: middle 却没效果，大概率不是属性写错了，而是单元格没“撑开”——vertical-align 是在当前单元格高度范围内做对齐，如果高度由单行短文本自动撑开，middle 和 baseline 看起来几乎一样。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>加min-height或上下padding（如padding: 12px 8px），扩大对齐可用空间 - 确保单元格内没有
<div>、<p>等块级包裹，否则内容脱离行框，vertical-align彻底失能 - 别往
<table>或<tr>上写vertical-align，它只对td、th或display: table-cell元素有效 - 若需统一设置，写
td, th { vertical-align: middle; }，而不是table { vertical-align: middle; }
真正难的不是选哪个方案，而是先判断图标所处的上下文：是按钮？表格单元格？纯行内提示？还是嵌套在段落中的符号？不同场景下，display 值、父级行高、是否混有块级元素，这些细节稍一错位，所有对齐都会失效。盯着 computed 样式看 display 和 line-height，比反复试 vertical-align 值更省时间。
