概述
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
| 初始值 | baseline |
|---|---|
| 适用元素 | inline-level and table-cell elements. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 否 |
| Percentages | refer to the line-height of the element itself |
| 适用媒体 | visual |
| 计算值 | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
Formal syntax: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* <length> values */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values */
vertical-align: 20%;
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;取值 (对于行内(inline)元素)
大部分取值是相对于父元素来说的：
baseline- 元素基线与父元素的基线对齐。
- 对于一些 可替换元素，比如
<textarea>， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。 sub- 元素基线与父元素的下标基线对齐。
super- 元素基线与父元素的上标基线对齐。
text-top- 元素顶端与父元素字体的顶端对齐。
text-bottom- 元素底端与父元素字体的底端对齐。
middle- 元素中线与父元素的小写x中线对齐。
<length>- 元素基线超过父元素的基线指定高度。可以取负值。
<percentage>- 同 <length> , 百分比相对于
line-height。
以下两个值是相对于整行来说的：
top- 元素及其后代的顶端与整行的顶端对齐。
bottom- 元素及其后代的底端与整行的底端对齐。
如果元素没有基线baseline，则以它的外边距的下边缘为基线。
取值 (对于table-cell元素)
baseline(andsub,super,text-top,text-bottom,<length>, and<percentage>)- 与同行单元格的基线对齐。
top- 单元格的内边距的上边缘与行的顶端对齐。
middle- 单元格垂直居中。
bottom- 单元格的内边距的下边缘与行的底端对齐。
可以取负值。
形式化语法
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
示例
HTML 内容
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div> <div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
CSS 内容
img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
Result
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions vertical-align |
Working Draft | Defines visibility as animatable. |
| CSS Level 2 (Revision 1) vertical-align |
Recommendation | Add the <length> value and allows it to be applied to element with a display type of table-cell. |
| CSS Level 1 vertical-align |
Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 4.0 | 1.0 (85) |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | 1.0 |
参见
line-height,text-align,margin-
Understanding
vertical-align, or "How (Not) To Vertically Center Content" - All You Need To Know About Vertical-Align（翻译在https://mxd.tencent.com/vertical-align）