mozilla
您的搜索结果

    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
    • 可动画 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
    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

    See also

    文档标签和贡献者

    此页面的贡献者有: p2world, zbinlin, yan, teoli
    最后编辑者: p2world,