在CSS布局中，vertical-align是最容易被误解的属性之一。它并不像很多人以为的那样，可以随意把任意两个盒子上下对齐，而是专门用来调整行内级元素（inline、inline-block）以及表格单元格（table-cell）在其所在行盒（line box）中的垂直位置。如果你把它写在普通的块级div上，浏览器会直接忽略这条声明。
要理解vertical-align，必须先理解行盒的构造。每一行文本或行内元素排布时，浏览器会生成一个行盒，行盒的高度由该行内所有元素的line-height、字体大小、替换元素高度等共同决定。行盒中存在一条基线（baseline），对于文本来说是字母x的下边缘，对于替换元素或inline-block盒子来说，默认基线是其底部外边距边缘。vertical-align的所有取值，本质上都是在描述元素自身相对于这条基线或行盒边界的偏移。
常见取值分类
vertical-align的取值可以分为三类。第一类是相对于基线对齐：baseline（默认，元素基线对齐行盒基线）、sub（降低基线，如下标）、super（升高基线，如上标）。第二类是相对于父元素的文本或行盒边界：text-top（元素顶部对齐父元素字体顶部）、text-bottom（元素底部对齐父元素字体底部）、top（元素顶部对齐行盒顶部）、bottom（元素底部对齐行盒底部）。第三类是百分比或长度值，如middle（对齐父元素基线加上x高度的一半处），以及10px或-20%这类直接偏移量，百分比基于元素自身的line-height计算。
实际开发中，最常用的是baseline、middle、top、bottom。比如一个inline-block的图标和文字排在一起，默认baseline会让图标底部贴着文字基线，造成视觉上图标偏下。改成middle往往更协调，但middle并非严格数学居中，而是对齐父基线+x-height一半，字体较大时仍有细微偏差。下面是一段对比代码：
<style>
.box { font-size: 16px; line-height: 24px; border: 1px solid #ccc; }
.icon { display: inline-block; width: 20px; height: 20px; background: #f00; }
.base { vertical-align: baseline; }
.mid { vertical-align: middle; }
</style>
<div class="box">
<span class="icon base"></span> 基线对齐文字
</div>
<div class="box">
<span class="icon mid"></span> 中线对齐文字
</div>
为什么经常“写了没用”
一个典型误区是试图用vertical-align去对齐两个并排的块级div。如下代码不会起任何作用，因为外层是块级上下文，vertical-align不生效：
.parent { height: 100px; }
.child { display: block; vertical-align: middle; } /* 无效 */
另一个坑是inline-block元素之间出现莫名空隙，并伴随对齐跳动。这是因为HTML换行符被解析为空白文本节点，参与了行盒基线计算。此时可以给父元素设font-size:0，或用float、flex避开行内上下文。此外，当行内元素line-height设置过大，行盒被撑高，top和bottom对齐会明显偏离预期，需要同步检查line-height而非只调vertical-align。
表格单元格中的用法
在table布局或display:table-cell的容器中，vertical-align用来控制单元格内容在单元格内的垂直对齐，取值意义类似但参照物变为单元格高度。例如下面代码让单元格内容垂直居中：
<style>
.cell { display: table-cell; height: 80px; vertical-align: middle; border: 1px solid #333; }
</style>
<div class="cell">居中文本</div>
这种用法比在行内元素上直观，因为单元格是单一内容块，不存在多个基线竞争。但要注意，若单元格内再放入inline-block且带不同line-height的元素，依旧会回到行盒规则中。因此复杂组件建议直接采用flex布局的align-items，避免多层垂直对齐规则叠加导致难以调试。
调试与实践建议
排查vertical-align问题，第一步用开发者工具查看元素computed里display是否为inline/inline-block/table-cell；第二步检查父行盒的line-height与字体；第三步临时给元素加背景或边框，观察其盒模型与相邻文本基线的关系。如下脚本可快速标出基线参考：
<style>
.ref { display: inline-block; width: 2px; height: 1em; background: blue; vertical-align: baseline; }
</style>
<span class="ref"></span>文本
总体原则：vertical-align只解决行内上下文里的微小错位，不替代flex或grid的主轴对齐。面对整块区域居中，应优先使用display:flex配合align-items:center，把vertical-align留给图标、输入框、角标这类行内细节。弄清参照系与生效范围，就能稳定驾驭这个属性，而不再靠反复试错。
cssvertical-align行内元素对齐修改时间：2026-08-07 02:27:29