vertical-align

概述

CSS 的属性 vertical-align 指定了行内(inline)元素或表格单元格(table-cell)元素的垂直对齐方式。

  • 初始值 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
  • 是否适用于 CSS 动画 yes, as 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>
vertical-align: baseline     /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom
vertical-align: 10em          /* <length> values */
vertical-align: 4px
vertical-align: 20%           /* <percentage> values */

vertical-align: inherit

取值 (行内(inline)元素)

多数值是相对于父元素:

baseline
元素基线与父元素的基线对齐。一些 可替换元素,比如 <textarea> , HTML标准没有说明它的基线,这意味着使用这个关键字,各浏览器表现可能不一样。
sub
元素基线与父元素的下标基线对齐。
super
元素基线与父元素的上标基线对齐。
text-top
元素顶端与父元素字体的顶端对齐。
text-bottom
元素底端与父元素字体的底端对齐。
middle
元素中线与父元素的基线对齐。
<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>

例子

img {
	vertical-align: bottom;
}

规范

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

参见

文档标签和贡献者

向此页面作出贡献: FredWe, p2world, teoli, yan, zbinlin
最后编辑者: FredWe,