vertical-align
Published by powerfulyang on Aug 18, 2022
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Values for inline elements
Parent-relative values
These values vertically align the element relative to its parent element:
-
baseline Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.
-
sub Aligns the baseline of the element with the subscript-baseline of its parent.
-
super Aligns the baseline of the element with the superscript-baseline of its parent.
-
text-top Aligns the top of the element with the top of the parent element's font.
-
text-bottom Aligns the bottom of the element with the bottom of the parent element's font.
-
middle Aligns the middle of the element with the baseline plus half the x-height of the parent.
-
<length> Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
-
<percentage> Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed.
Line-relative values
The following values vertically align the element relative to the entire line:
-
top Aligns the top of the element and its descendants with the top of the entire line.
-
bottom Aligns the bottom of the element and its descendants with the bottom of the entire line.
For elements that do not have a baseline, the bottom margin edge is used instead.
Values for table cells
-
baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>) Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
-
top Aligns the top padding edge of the cell with the top of the row.
-
middle Centers the padding box of the cell within the row.
-
bottom Aligns the bottom padding edge of the cell with the bottom of the row.
Negative values are allowed.
2022-02-25 补充
我终于懂了
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
原来是给 行内元素
在行内用的。 块级的就 flex 一把梭