介绍

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

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

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

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

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

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

.avatar {
  vertical-align: middle;
}

例子

很难将垂直对齐的不同关键字值的效果可视化，因此这里是使用不同值放置的内联贝壳表情符号 (🐚) 的示例：

垂直对齐：基线

萨米卖贝壳 🐚 在海边。

垂直对齐：底部

萨米卖贝壳 🐚 在海边。

垂直对齐：中间

萨米卖贝壳 🐚 在海边。

垂直对齐：子

萨米卖贝壳 🐚 在海边。

垂直对齐：超级

萨米卖贝壳 🐚 在海边。

垂直对齐：文本底部

萨米卖贝壳 🐚 在海边。

垂直对齐：文本顶部

萨米卖贝壳 🐚 在海边。

垂直对齐：顶部

萨米卖贝壳 🐚 在海边。