CSS垂直对齐属性

介绍

vertical-align 定义表格单元格内容或内联元素与内联流其余部分的垂直对齐方式。

vertical-align 可以采用 % 或 length 值，也可以采用以下 8 个关键字之一：

• baseline：默认值。 元素的基线与父元素的基线对齐。
• bottom：元素的底部与行的完整底部对齐。
• middle：元素的中间对齐到父元素 x 高度的一半。 x-height 是没有字符升序或降序的文本的高度。
• sub：元素的基线对齐到父元素的下标基线。
• super：元素的基线对齐到父元素的上标基线。
• text-bottom：元素底部与文本底部对齐。
• text-top：元素的顶部与文本的顶部对齐。
• top：元素的顶部与行的顶部对齐。

如果提供了 length 值，则元素以父元素基线上方的指定长度对齐。

如果提供了 % 值，则元素在父元素基线上方的指定 % 处对齐，其中 % 是对行高的引用。

这是使用垂直对齐的示例：

.avatar {
  vertical-align: middle;
}

例子

很难想象垂直对齐的不同关键字值的效果，所以这里有一个带有不同值的内联贝壳表情符号 (🐚) 的示例：

垂直对齐：基线

Sammy在海边卖贝壳🐚。

垂直对齐：底部

Sammy在海边卖贝壳🐚。

垂直对齐：中间

Sammy在海边卖贝壳🐚。

垂直对齐：子

Sammy在海边卖贝壳🐚。

垂直对齐：超级

Sammy在海边卖贝壳🐚。

垂直对齐：文本底部

Sammy在海边卖贝壳🐚。

垂直对齐：文本顶部

Sammy在海边卖贝壳🐚。

垂直对齐：顶部

Sammy在海边卖贝壳🐚。