vertical-align

概述

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

初始值baseline
适用元素inline-level and table-cell elements. It also applies to ::first-letter and ::first-line.
是否是继承属性否
Percentagesrefer to the line-height of the element itself
适用媒体visual
计算值for percentage and length values, the absolute length, otherwise the keyword as specified
Animation typea 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 (and sub, super, text-top, text-bottom, <length>, and <percentage>)
与同行单元格的基线对齐。
top
单元格的内边距的上边缘与行的顶端对齐。
middle
单元格垂直居中。
bottom
单元格的内边距的下边缘与行的底端对齐。

可以取负值。

形式化语法

How to read CSS syntax.

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

参见

文档标签和贡献者