vertical-align 用于调节 inline-block 元素在行内上下文中的基线对齐位置，而非绝对垂直居中；它仅对 inline、inline-block、table-cell 生效，需父容器形成行盒且子元素为 inline-block 才起作用。
vertical-align 对 display: inline-block 元素到底起什么作用？
vertical-align 不是控制元素自身在父容器里的垂直居中，而是调节行内上下文中的基线对齐位置。它只对 display: inline、inline-block、table-cell 这类参与行盒（line box）布局的元素生效——对 block 或 flex 子项完全无效。
常见误解是把它当“垂直居中神器”用，结果发现加了 vertical-align: middle 没反应：大概率是因为父容器没形成行内上下文（比如父级是 div 默认 block，子元素又没设 inline-block）。
- 必须同时满足两个条件：父级有足够高度（或有其他行内内容撑起行高），且子元素是
inline-block（或inline） -
vertical-align的取值如top、middle、bottom、baseline，实际对齐基准取决于兄弟元素的基线、行高、字体大小等，不是绝对像素偏移 - 如果父级设置了
font-size: 0，可消除inline-block元素间默认的空白间隙，但此时vertical-align的参考基线也会变化，容易误判
为什么 vertical-align: middle 总是对不齐图片和文字？
因为图片默认是 inline 元素，其 baseline 在底部（对齐文字基线），而文字本身有下降部（如 g、y 的下延），导致视觉上图片“浮高”。vertical-align: middle 是把元素中点对齐父行框中点，不是对齐文字中线。
典型场景：一个 img 和一段 span 文字并排，想视觉居中对齐。
立即学习“前端免费学习笔记（深入）”；
- 最稳解法：
img { vertical-align: -4px }或img { vertical-align: text-bottom }—— 后者直接对齐文字底边，比猜像素更可靠 - 避免用
vertical-align: middle配合默认font-size，因行高（line-height）会影响中点位置，不同字体渲染也有差异 - 若父容器是
inline-block容器且高度固定，可改用line-height匹配容器高度，再配合vertical-align: middle，但前提是内容单行且无换行风险
替代方案：什么时候该放弃 vertical-align 改用 Flex？
当需要真正可控的垂直/水平居中、响应式堆叠、或子元素数量动态变化时，vertical-align 就力不从心了。它本质是为文本流设计的，不是为复杂布局。
比如分段式内容块（标题+描述+按钮）需要整体对齐，又不想写一堆 inline-block + vertical-align + font-size: 0 组合技。
- 父容器加
display: flex; align-items: center;，子元素自动按交叉轴居中，不依赖行高、基线、字体 - 兼容性已不是问题：
flex在现代浏览器（Chrome 29+、Firefox 28+、Safari 9+）稳定支持；IE11 虽有 bug（如min-width失效），但基础对齐可用 - 注意：Flex 会改变子元素的块级行为——原本
div是块级，放进flex容器后默认变成flex-item，width和margin表现会变，需显式设置flex: none或width
真实项目里最容易漏掉的三个细节
不是语法错，而是上线后才暴露的隐性坑：
-
vertical-align只影响行内布局，如果父容器用了overflow: hidden且高度不够，对齐后的元素可能被裁切——检查父级line-height和height是否预留空间 - 使用
inline-block时，HTML 中的换行符和空格会被渲染成空白字符，造成不可见间隙；要么删 HTML 空格，要么父级设font-size: 0再给子元素重设font-size - 某些 CSS 重置库（如 normalize.css）会修改
img的默认vertical-align值，导致本地开发和生产环境表现不一致——查 computed styles 看最终值，别只信初始声明
对齐这事，没有银弹。vertical-align 是窄口径工具，适合轻量、静态、行内语义明确的场景；一旦需求带上“自适应”“多端”“内容长度不定”，就该果断切到 Flex 或 Grid——不是技术过时，是工具选错了刻度。
