CSS vertical-align 属性用于设置行内元素、行内块元素或表格单元格的垂直对齐方式。

语法

vertical-align 属性可以接受多种值，包括关键字、长度值和百分比。常见的值有：

• baseline：默认值，元素基线与父元素的基线对齐
• top：元素顶部与行中最高的元素顶部对齐
• bottom：元素底部与行中最低的元素底部对齐
• middle：元素垂直中点与父元素基线上方0.5ex处对齐
• text-top：元素顶部与父元素字体顶部对齐
• text-bottom：元素底部与父元素字体底部对齐
• length：使用长度值提升或降低元素
• %：使用百分比提升或降低元素

使用场景

vertical-align 属性在以下场景中特别有用：

• 调整图片与文本的垂直对齐
• 控制表格单元格内容的垂直位置
• 创建表单元素的对齐效果
• 调整行内元素的垂直位置

示例

以下是一个简单的示例，展示如何使用 vertical-align 属性：

img {
  vertical-align: middle;
}

td {
  vertical-align: top;
}
  

注意事项

使用 vertical-align 属性时需要注意以下几点：

• 该属性只对行内元素、行内块元素和表格单元格有效
• 对于块级元素，vertical-align 属性不起作用
• 使用百分比时，是相对于 line-height 值计算的
• 不同浏览器对 vertical-align 的实现可能存在细微差异

浏览器兼容性

vertical-align 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge。该特性自2015年7月起就被所有浏览器支持，是一个稳定可靠的 CSS 属性。