vertical-align仅作用于inline-level和table-cell元素，对块级元素无效；其核心用途是控制行内元素在行框中的垂直对齐或表格单元格内容的垂直对齐，而非实现容器内垂直居中。

vertical-align 只作用于 inline-level 和 table-cell 元素

它根本不是为块级元素设计的。CSS 规范明确定义 vertical-align 的生效前提是：目标元素必须是 inline、inline-block、inline-table 或 table-cell。一个默认 display: block 的 div，哪怕你硬加上 vertical-align: middle，浏览器会直接忽略——这不是 bug，是规范行为。

常见误用场景包括：

• 给 div 或 p 直接设 vertical-align，毫无反应
• 给 float 或 position: absolute 元素设该属性，此时 display 被强制重置为 block，vertical-align 失效
• 在 Flex 容器中给子项设 vertical-align，而 Flex 子项的对齐应由 align-items 或 align-self 控制

为什么 inline-block 元素设了 vertical-align 还“错位”

因为 inline-block 仍属于行内格式化上下文（IFC），它的对齐基准仍是行盒（line box）里的基线（baseline）。默认情况下，inline-block 的 baseline 是其内容最后一行文字的 baseline；若内容为空或只有块级子元素，baseline 就落在容器底边，导致视觉上“下沉”。

解决方法不是猜值，而是明确控制：

• 统一设 vertical-align: top 或 vertical-align: middle，避免 baseline 不一致
• 父容器加 font-size: 0 消除空白符产生的行高干扰，再单独给子元素设 font-size
• 用 vertical-align: -2px 这类数值微调，比依赖 middle 更可靠

想让块级元素“垂直居中”，别硬套 vertical-align

这是最常踩的逻辑陷阱：vertical-align 解决的是“行内环境中的垂直位置”，不是“容器内的垂直居中”。真要让一个 div 在父容器里垂直居中，该用真正面向布局的方案：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• Flex 布局：display: flex + align-items: center（推荐，语义清晰、兼容好）
• Grid 布局：display: grid + place-items: center
• 绝对定位 + transform：position: absolute + top: 50% + transform: translateY(-50%)
• table-cell 方案（老式但兼容极佳）：父元素 display: table，子元素 display: table-cell + vertical-align: middle

强行把块级元素改成 inline-block 再配 vertical-align，往往要连带处理 line-height、空白符、父容器高度等副作用，得不偿失。

字体图标和 img 标签的 vertical-align 行为差异

img 天然是 inline，所以 vertical-align 直接生效；但字体图标（如 <i class="icon"></i>）本质是文字，它的 baseline 对齐逻辑更复杂——视觉中心常不等于字体度量中心。

典型表现是：设 vertical-align: middle 后图标仍略偏下。这时更稳妥的做法是：

• 用 vertical-align: -0.125em（Font Awesome 官方推荐偏移量）
• 改用 vertical-align: text-bottom 强制底边对齐
• 直接包裹一层 span 并设 display: inline-block，再独立控制对齐

真正容易被忽略的，是不同字体图标库的度量差异——同一段 CSS 在 FontAwesome 和 IconPark 下可能需要不同的 vertical-align 数值。不要写死 middle，留出微调余地。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！