垂直对齐 | vertical-align

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

/* 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;

vertical-align属性可以在两个上下文中使用：

• 在其包含的行框内垂直对齐内联元素的框。例如，它可以用来在一行文本中垂直对齐<img>：

• 垂直对齐表格中单元格的内容：

请注意，vertical-align只适用于内联和表格元素：不能用它来垂直对齐块级元素。

初始值	baseline
适用元素	inline-level and table-cell elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	no
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

语法

该属性被指定为下面列出的关键字值之一。

取值 (对于行内(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; }

输出

规范

Specification	Status	Comment
CSS TransitionsThe definition of 'vertical-align' in that specification.	Working Draft	Defines vertical-align as animatable.
CSS Level 2 (Revision 1)The definition of 'vertical-align' in that specification.	Recommendation	Add the <length> value and allows it to be applied to element with a display type of table-cell.
CSS Level 1The definition of 'vertical-align' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	4.0	4.0	1.0 (85)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	1.0	1.0	(Yes)	1.0 (1.0)	(Yes)	(Yes)	1.0

另见

• line-height，text-align，margin

• 理解vertical-align

• 垂直对齐——你所需要知道的一切