css 垂直对齐_CSS垂直对齐属性

程序员文章站 2022-04-27 08:15:00

...

css 垂直对齐

介绍 (Introduction)

vertical-align defines the vertical alignment for the content of a table cell or for an inline element against the rest of the inline flow.

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

vertical-align can take a % or length value, or it can take one of the following 8 keywords:

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

baseline: The default. Baseline of the element aligned to the baseline of the parent.

baseline ：默认值。元素的基线与父元素的基线对齐。
bottom: Bottom of the element aligned to the complete bottom of the line.

bottom ：元素的底部与行的整个底部对齐。
middle: Middle of the element aligned to half the x-height of the parent. The x-height is the height of the text without the character ascenders or descenders.

middle ：元素的中间，对齐到父元素的x高度的一半。 x高度是不含字符的上升或下降字符的文本的高度。
sub: Baseline of the element aligned to the subscript baseline of the parent.

sub ：元素的基线与父元素的下标基线对齐。
super: Baseline of the element aligned to the superscript baseline of the parent.

super ：元素的基线与父对象的上标基线对齐。
text-bottom: Bottom of the element aligned to the bottom of the text.

text-bottom ：元素的底部与文本的底部对齐。
text-top: Top of the element aligned to the top of the text.

text-top ：元素的顶部与文本的顶部对齐。
top: Top of the element aligned to the top of the line.

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

If a length value is provided, the element is aligned at the specified length above the baseline of the parent.

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

If a % value is provided, the element is aligned at the specified % above the baseline of the parent, with the % being a reference to the line-height.

如果提供％值，则该元素在父级基线上方指定的％处对齐，该％是对行高的引用。

Here’s an example using vertical-align:

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

.avatar {
  vertical-align: middle;
}

例子 (Examples)

It can be hard to visualize the effects of the different keyword values for vertical-align, so here are examples with an inline seashell emoji (????) placed with different values:

可能很难直观地看到不同关键字值对垂直对齐的影响，因此下面是带有不同值的嵌入式贝壳表情符号(????)的示例：