CSS 的 vertical-align 属性在盒模型对齐中是一个特殊存在。它不像 margin 或 padding 那样直接作用于块级盒子，而是针对行内格式化上下文中的行内级元素和行内块元素，以及表格单元格中的内容对齐。许多人尝试给 div 设置 vertical-align: middle 想让容器内容居中，却发现没有任何效果，原因就在于 div 默认是块级元素，不参与行内级对齐。要真正理解这个属性，必须先了解行框、基线、行高这几个概念。
一、vertical-align 的作用范围与行框模型
在讨论对齐之前，需要先弄清行框的构成。行内元素会生成行内框，多个行内框会组成一个行框，行框的高度由行高、字体大小以及替换元素的高度共同决定。默认情况下，行内元素的垂直位置由基线决定。基线是小写字母 x 底部所在的那条线，vertical-align 的作用就是调整元素相对于这条基线或行框上下边界的位置。如果元素是 <img> 或 <input> 这类替换元素，基线则会依据元素自身的底部边缘或内部内容计算。
块级元素没有行内框，因此设置 vertical-align 不会产生任何效果。只有 display: inline、display: inline-block 以及表格单元格 display: table-cell 这些能够创建行内级盒子或单元格盒子的元素才会响应该属性。下面的示例展示了不同字号的 <span> 在默认基线对齐时的表现。
<div class="box"> <span class="small">small</span> <span class="large">large</span> </div>
.box {
border: 1px solid #ccc;
line-height: 1.5;
}
.small {
font-size: 12px;
}
.large {
font-size: 32px;
}
可以看到两个 <span> 的底部并不对齐，而是基线对齐，这也是默认行为。当需要改变这种对齐关系时，就可以通过 vertical-align 的不同取值来调整。
二、常用属性值与计算规则
vertical-align 可以接受关键字、长度值和百分比值。关键字包括 baseline、sub、super、top、text-top、middle、bottom、text-bottom。其中 baseline 是默认值，表示元素基线与父元素基线对齐；sub 和 super 分别表示下标和上标；top 对齐到行框顶部；bottom 对齐到行框底部；text-top 和 text-bottom 则是对齐到父元素字体内容的顶部或底部。
需要特别注意的是 middle 并不是把元素绝对居中，而是把元素的垂直中点与父元素基线加上 x 高度一半的位置对齐。对于中文字体或大小不一致的场景，这种居中可能看起来不完全居中。长度值会相对于基线偏移，正数向上，负数向下；百分比值则参照元素自身的 line-height 计算，而不是元素高度，这是很多人容易搞混的地方。例如 vertical-align: 50% 在 line-height: 20px 时只会偏移 10px。
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.align-bottom {
vertical-align: bottom;
}
.offset-up {
vertical-align: 6px;
}
.offset-percent {
vertical-align: 25%;
}
在实际调试时，可以为父元素设置不同背景色和 line-height，观察各个行内元素相对行框的位置变化。通常 top 和 bottom 在行高较大的文本中更常用，而 middle 在图标与文字混排时比较实用。
三、行内块元素与图标文字对齐实战
行内块元素 <img>、<button> 或者设置了 display: inline-block 的容器在垂直对齐中更容易出现底部空隙问题。原因在于行内块元素如果没有内部文本，基线会落在元素的下外边距边界上；如果有内部文本，基线则是最后一行文本的基线。当一张图片与相邻文字按基线对齐时，图片下方就会留下空间，表现为容器高度比图片高度多出几像素。
解决这个问题的最常见做法是给图片设置 vertical-align: middle 或 vertical-align: top。例如下面的结构：
<p class="icon-text"> <img src="icon.png" alt="" class="icon"> 这是一段说明文字 </p>
.icon-text {
font-size: 16px;
line-height: 24px;
}
.icon {
width: 20px;
height: 20px;
vertical-align: middle;
}
设置 vertical-align: middle 后，图片的垂直中点会与文字内容的中间区域对齐，底部空隙基本消失。如果希望图片紧贴容器顶部，可以改用 vertical-align: top。对于按钮内部的文字和图标，也可以对 <img> 或 <span> 使用类似的方法。需要记住的是，即使将图片设置为 display: block 也能消除底部空隙，但这样会改变布局模式，需要根据实际情况选择。
四、表格单元格对齐与现代布局替代方案
在表格布局中，vertical-align 用于控制单元格内容相对单元格框的垂直位置，可选值通常有 top、middle、bottom。例如：
table td {
height: 80px;
vertical-align: middle;
}
这种用法在传统页面中比较常见，但表格布局本身较为受限。现代布局中，flexbox 的 align-items 和 justify-content 组合可以提供更直观、更强大的垂直居中能力；grid 布局也能通过 align-items 或 align-self 实现类似效果。例如一个简单的 flex 容器：
.flex-box {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
相比 vertical-align，flex 和 grid 不依赖行内格式化上下文，也不受基线、行高和替换元素的影响，更加符合直觉。因此，在处理块级容器内部的整体对齐时，优先考虑 flex 或 grid；而在行内文本、图标与文字混排等行内级场景中，仍然需要依靠 vertical-align。理解两者的适用边界，可以避免很多无效的 CSS 调试。
CSS vertical-align盒模型元素对齐修改时间：2026-10-01 00:18:08