vertical-align正确使用

vertical-align 是 CSS 中用来控制行内元素（inline、inline-block）和表格单元格（table-cell）垂直对齐方式的关键属性。

它的核心是基于基线（baseline）对齐模型。默认情况下，元素的基线与父元素的基线对齐。文本的基线通常位于字母 x 的底部，而图片等替换元素的基线通常在其底部边缘。这个默认行为常常是导致布局中出现意外错位的根源。

? 语法与属性值

vertical-align 的取值主要分为以下几类：

1. 基线对齐类 (Baseline)

• baseline：默认值。元素基线与父元素基线对齐。
• sub：模拟下标效果，使元素基线下移。
• super：模拟上标效果，使元素基线上移。
• text-top / text-bottom：元素顶部/底部与父元素字体的顶部/底部对齐。

2. 边界对齐类 (Line Box)

• top / bottom：元素顶部/底部与当前行框（line box） 的顶部/底部对齐。

text-top/text-bottom 与 top/bottom 的区别在于参考系不同：前者是“父元素的字体”，后者是“当前行框”。

3. 中部对齐类 (Middle)

• middle：元素的中线与父元素基线加上小写字母 x 高度的一半的位置对齐。常用于图标与文本的居中对齐。

4. 数值偏移 (Length/Percentage)

• <length>：如 10px，-0.5em。使元素相对基线偏移指定的距离（正值上移，负值下移）。
• <percentage>：如 20%。偏移量基于元素的 line-height 计算。

? 常见应用场景

1. 行内元素对齐：图标与文字

这是最常见的场景。要使图标与旁边的文字垂直居中，可以给图标设置 vertical-align: middle。

.icon {
  vertical-align: middle;
}

2. 表格单元格内容对齐

在表格中，vertical-align 用于控制单元格（<td> 或 <th>）内容的垂直位置。

td {
  vertical-align: middle; /* 内容垂直居中 */
}

默认情况下，表格单元格的内容是垂直居中的。

3. 精细微调：数值偏移

当使用 middle 等关键字无法达到完美视觉效果时，可以用数值进行微调。

.icon {
  vertical-align: -0.15em; /* 将图标向下微调 0.15em */
}

⚠️ 常见误区与注意事项

1. 不能用于块级元素：vertical-align 对 display: block 或 display: flex 等块级元素无效。
2. 理解行框（Line Box）：vertical-align 是在行内格式化上下文中起作用的。一个行框的高度是由其内部所有元素共同决定的，改变其中一个元素的对齐方式可能会影响整个行框的高度，进而影响其他元素的位置。
3. 与 Flexbox/Grid 的区别：在 Flexbox 或 Grid 布局中，垂直对齐应使用 align-items 或 align-self 等属性，而不是 vertical-align。

? 总结

要正确使用 vertical-align，关键就是记住三点：

• 作用范围：它只对行内、行内块和表格单元格元素生效。
• 默认行为：默认是 baseline 对齐，这是很多“错位”问题的根源。
• 常用值：实现图标文字居中多用 middle；控制表格内容用 top、middle 或 bottom；需要微调时使用长度或百分比值。