vertical-align仅对行内、行内块及table-cell元素生效，用于控制行框内的垂直对齐，不影响块级、Flex或Grid子元素，正确理解其适用场景可避免排版错误。
在CSS布局中，vertical-align 并不总是对所有元素都生效。它只在特定的上下文中起作用，理解其生效条件有助于避免常见的排版问题。
1. 只对行内元素和行内块元素生效
vertical-align 主要用于控制行内（inline）或行内块（inline-block）元素在一行内的垂直对齐方式。
常见适用元素包括：- 文本中的
span、img - 设置为
display: inline或display: inline-block的盒子 - 表格单元格中的内容（配合
display: table-cell）
如果一个元素是块级元素（如 div 默认 display: block），vertical-align 不会产生任何效果。
2. 在文本行或行框（line box）中起作用
该属性影响的是元素在其所在“行框”中的垂直位置。浏览器会根据行内元素的高度、字体大小和 vertical-align 值来计算最终对齐方式。
立即学习“前端免费学习笔记（深入）”；
例如：
- 两个
img标签并排显示时，可以用vertical-align: middle让它们居中对齐 - 一个
input和旁边的文本不对齐时，可通过调整 vertical-align 修正
3. 对 table-cell 元素也有效
当元素的 display 被设置为 table-cell 时，vertical-align 可以像 HTML 表格中的 valign 属性一样控制内容的垂直对齐。
-
top：内容靠上对齐 -
middle：居中对齐 -
bottom：靠下对齐
这在创建等高布局或垂直居中容器内容时非常实用。
4. 不影响 Flex 或 Grid 子元素的对齐
在 Flexbox 或 CSS Grid 布局中，子元素的垂直对齐应使用 align-items、align-self 等专用属性。此时 vertical-align 完全无效。
- 试图用 vertical-align 居中 flex 容器中的项目 —— 不会起作用
- 在 grid 单元格中使用它替代 align-content —— 无效
基本上就这些。只要记住：vertical-align 生效的前提是元素处于行内格式化上下文中，或者 display 类型为 table-cell。其他情况建议使用更现代的布局方式处理对齐问题。
