vertical-align仅对inline、inline-block、table-cell元素生效，块级元素（如div、p）设置该属性会被浏览器忽略；其作用域限于行框内对齐，非整体容器居中方案。
vertical-align 是解决 HTML 相邻元素垂直对齐问题的核心属性，但它只对行内级元素（inline、inline-block）和表格单元格（td、th）生效。直接给 div 或 p 设 vertical-align 没用，这是最常踩的坑。
为什么 vertical-align 加在 div 上没反应？
因为 vertical-align 的作用机制依赖于“行内格式化上下文”（IFC）或“表格格式化上下文”（TFC）。div 默认是 display: block，不参与行内布局，所以该属性被忽略。
- ✅ 正确场景：两个
img并排、span和图标混排、input与旁边文字对齐 - ❌ 错误写法：
div { vertical-align: middle; }—— 完全无效 - ? 补救办法：把块级元素临时改成
display: inline-block，再加vertical-align
vertical-align 常见取值的实际效果差异
不同取值在混合内容中表现差异明显，尤其当元素高度不一致时：
-
baseline（默认）：按文字基线对齐，适合纯文本+小图标；但图片常会“悬空”，看起来偏高 -
middle：按父容器 行框（line box） 中心对齐，不是整个容器居中；需配合line-height或足够高的行框才明显 -
text-bottom：对齐到父元素字体底部，比bottom更自然，推荐用于图片+文字组合 -
top/bottom：对齐到行框顶部/底部，适合控件组整体上沿或下沿对齐
示例：<span>文字</span><img src="icon.png" style="max-width:90%" alt="HTML相邻元素垂直对齐怎么做？常用设置指南" > 比 bottom 更贴合文字视觉重心。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
相邻行内元素高度不同时怎么避免错位？
当一个 span 字体大、另一个小，或插入了不同 line-height 的元素，行框会被拉高，导致部分元素“沉底”或“浮顶”。
- 统一设置父容器的
line-height（如line-height: 1.5），约束行框高度 - 避免在相邻元素中混用
font-size差异过大的span；如必须，用vertical-align: middle+ 调整line-height补偿 - 对图标类元素，优先用
vertical-align: -0.125em这类微调值，比middle更精准（尤其搭配 Font Awesome 或 SVG） - 若对齐仍不稳定，改用 Flex：把父容器设为
display: inline-flex，子元素用align-items: center—— 更可控，且不依赖行框
兼容性与废弃属性避坑要点
老项目里可能还残留 valign 或 align 属性，它们不仅过时，还会干扰 CSS 控制：
-
valign="middle"是 HTML4 属性，在 HTML5 中已废弃；W3C 验证器报错，且某些浏览器下会覆盖vertical-alignCSS 规则 -
<img align="absmiddle" alt="HTML相邻元素垂直对齐怎么做？常用设置指南" >同样废弃，absmiddle等效于旧版vertical-align: middle，但行为不一致 - 全局搜索并删除所有
valign=和align=属性，统一收口到 CSS - 注意 IE8–IE11 对
vertical-align在inline-block元素上的支持有细微偏差，必要时加font-size: 0到父容器清除空白间隙影响
真正容易被忽略的是：对齐效果是否可见，取决于“是否有足够的对齐空间”——如果父容器行高太小、或相邻元素挤占了行框，vertical-align 就像调音不准的琴弦，再怎么设也听不出差别。
