vertical-align: middle是最常用且有效的起点，它让行内块元素中点对齐父行框x-height中线，绕过字体度量干扰，视觉更稳；但需注意其对齐的是行框中线而非容器中线，复杂场景宜用inline-flex+align-items:center替代。
vertical-align: middle 是最常用且有效的起点
行内块元素（如 <img>、<input>、<button></button>）和文字混排时，默认 vertical-align: baseline 会因基线定义不同而错位，vertical-align: middle 能绕过字体度量干扰，让元素中点对齐父行框的 x-height 中线，视觉上更稳。
常见错误现象：图片下方多出 3–4px 空白；<input type="text"> 和旁边文字看起来“矮一截”；图标和文字上下偏移不一致。
-
vertical-align: middle对<img>和<input>都适用，但需注意它对齐的是“行框中线”，不是父容器中线 - 若父容器
line-height远大于font-size，中线位置会上移，此时可配合line-height: normal或显式设line-height值 - 避免和
font-size: 0混用——后者虽能清空白，但会让子元素文字消失，需额外重置
用 display: inline-flex 替代 inline-block 实现像素级可控对齐
当 vertical-align 在复杂行高或混合字号下开始漂移（比如一行里有 12px 文字 + 16px 图标 + 14px 输入框），靠单个属性已难收敛。这时把容器设为 display: inline-flex，再用 align-items: center，就不再依赖基线计算，而是按盒模型几何中心对齐。
使用场景：表单控件组、带图标的按钮、消息气泡里的头像+文字组合。
- 必须给父容器设
display: inline-flex，子元素保持默认display: inline-block或block即可 -
align-items: center是关键，它作用于交叉轴（垂直方向），不受line-height影响 - IE11 支持
inline-flex，但旧版 iOS Safari（≤9.3）对align-items在单行 flex 容器中的解析不稳定，建议加align-items: flex-start回退
table-cell + vertical-align: middle 是兼容性兜底方案
当项目必须支持 IE9 或某些邮件客户端（如 Outlook Desktop），flex 不可用，vertical-align: middle 单独又压不住 <img> 下方空白，可改用 display: table-cell 模拟表格单元格行为——它的 vertical-align 是真正按单元格内容高度居中的。
参数差异：相比 inline-block，table-cell 会忽略 margin，但支持 padding 和 border，且自动等高。
- 父容器设
display: table，子元素设display: table-cell+vertical-align: middle - 不需要固定宽高，但若子元素是图片，建议加
max-width: 100%防溢出 - 语义失真：这不是真表格，仅借用了渲染机制，长期维护成本略高
为什么 img 默认对齐总出问题
<img> 是替换元素，规范明确定义其基线 = 底边（bottom margin edge），不是图像内容底部，更不是视觉底边。所以即使设了 vertical-align: baseline，它也会把文字的基线（x 底边）对齐到自己底边，导致文字下方空出约 descender 高度（如 “g”、“y” 的下延部分）。
容易踩的坑：
- 只给
<img>加vertical-align，却没统一周围其他行内块（如<span></span>、<input>）的值，造成局部对齐、整体错位 - 在
line-height: 2的段落里嵌入图片，未同步调整font-size或重置line-height，导致行框撑高后基线锚点偏移 - 用
vertical-align: text-bottom试图对齐文字底边，但它对齐的是“当前字体的 text-bottom”，仍受 descender 影响，不如bottom可靠
真正省心的做法：所有行内块统一设 vertical-align: bottom 或 middle，别留默认值。对齐这事，一致性比理论正确更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
