简介

垂直对齐 定义表格单元格内容或行内元素相对于行内流其余部分的垂直对齐方式。

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

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

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

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

以下是使用垂直对齐的示例：

1.avatar {
2  vertical-align: middle;
3}

示例

很难想象vertical-align的不同关键字值的效果，所以这里有一个内嵌的贝壳表情符号（seashell emoji)的例子，放置了不同的值：

垂直对齐：基线

Sammy sells seashells 🐚 by the seashore.

竖直对齐：底部

Sammy sells seashells 🐚 by the seashore.

垂直对齐：居中

Sammy sells seashells 🐚 by the seashore.

垂直对齐：SUB

Sammy sells seashells 🐚 by the seashore.

垂直对齐：超级

Sammy sells seashells 🐚 by the seashore.

垂直对齐：文本-底部

Sammy sells seashells 🐚 by the seashore.

vertical-align：text-top

Sammy sells seashells 🐚 by the seashore.

垂直对齐：顶部

Sammy sells seashells 🐚 by the seashore.