vertical-align

摘要

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

  • 初始值 baseline
  • 适用元素 inline-level and table-cell elements
  • 可继承 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
  • 可动画 yes, as a length
  • Canonical order 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

值 (对于内联元素)

多数值是相对于父元素:

baseline
元素基线与父元素的基线对齐。一些 可替换元素,比如 <textarea> , HTML标准没有说明它的基线,这意味着使用这个关键字,各浏览器表现可能不一样。
sub
元素基线与父元素的下标基线对齐。
super
元素基线与父元素的上标基线对齐。
text-top
元素顶端与父元素字体的顶端对齐。
text-bottom
元素底端与父元素字体的底端对齐。
middle
元素中线与父元素的小写字母的中线对齐。
<length>
元素基线超过父元素的基线指定高度。可以取负值。
<percentage>
同 <length> , 百分比相对于 line-height

下面两个属性不像上面的属性相对于父元素,而是相对于整行:

top
 元素及其后代的顶端与整行的顶端对齐。
bottom
元素及其后代的底端与整行的底端对齐。

如果元素没有基线baseline,则以它的外边距的下边缘为基线。

值 (对于表格单元格)

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
与同行单元格的基线对齐。
top
单元格的内边距的上边缘与行的顶端对齐。
middle
单元格垂直居中。
bottom
单元格的内边距的下边缘与行的底端对齐。

可以取负值。

示例

img {
	vertical-align: bottom;
}

Specifications

Specification Status Comment
CSS Transitions Working Draft Defines visibility as animatable.
CSS Level 2 (Revision 1) Recommendation Add the <length> value and allows it to be applied to element with a display type of table-cell.
CSS Level 1 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

See also

Document Tags and Contributors

Contributors to this page: zbinlin, yan
最后编辑者: yan,