CSS vertical-align

admin

vertical-align

设置 行内元素 垂直对齐

vertical-align 是 CSS 中用于控制 行内元素 或 表格单元格内容 垂直对齐方式的属性。它主要用于调整元素相对于其父元素或行框的垂直位置。

适用场景

行内元素：如 <span>、<img>、<input> 等。

表格单元格：如 <td>、<th> 等。

替换元素：如图片、输入框 等。

常用属性值

vertical-align 支持多种属性值，以下是常见的几种：

关键字值

• baseline（默认值）：元素的基线与父元素的基线对齐。

• top：元素的顶部与行框的顶部对齐。

• middle：元素的中部与父元素的基线加上父元素 x-height 的一半对齐。

• bottom：元素的底部与行框的底部对齐。

• sub：使元素的基线与父元素的下标基线（subscript baseline）对齐。

• super：使元素的基线与父元素的上标基线（superscript baseline）对齐。

• text-top：元素的顶部与父元素字体的顶部（top of font）对齐。

• text-bottom：元素的底部与父元素字体的底部（bottom of font）对齐。

长度值

使用固定长度（如 px、em）或百分比（如 %）调整元素的垂直位置。

正数：元素向上移动。

负数：元素向下移动。

示例：

img {
    vertical-align: 10px; /* 图片向上移动 10px */
}

百分比值

相对于元素的 line-height 计算。

示例：

img {
    vertical-align: 50%; /* 向上移动 line-height 的 50% */
}

https://v.douyin.com/JVvzHZlKITw/