对vertical-align的理解

vertical-align的理解：

设置元素的垂直对齐方式，是以父元素作为参照的。

多用于图片和文字的并排对齐。

适用于内联元素，内联块元素和表单元素。

• display:inline;
• display:inline-block;
• display:table;
• display:table-cell;

浏览器支持所有浏览器都支持 vertical-align 属性。

允许指定负长度值和百分比值。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

默认值：baseline

继承性：无

JS语法：

object.style.verticalAlign="bottom"

基线

下面红线就是基线。

取值

baseline

默认。元素基线与父元素的基线对齐。

一些 可替换元素，比如 `` ， HTML标准没有说明它的基线，这意味着使用这个关键字，各浏览器表现可能不一样。

sub

元素基线与父元素字体的下标基线对齐。

super

元素基线与父元素字体的上标基线对齐。

text-top

元素顶端与父元素字体的顶端对齐。

text-bottom

元素底端与父元素字体的底端对齐。

middle

元素中线与父元素的小写x中线对齐。把此元素放置在父元素的中部。

元素基线超过父元素的基线指定高度。可以取负值。

同 , 百分比相对于 line-height 。可以为负值。基线对于百分数来说就是0%。

用百分比指定由基线算起的偏移量。

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

top

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

bottom

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

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

取值 (table-cell元素)

baseline (and sub, super, text-top, text-bottom, , and )

与同行单元格的基线对齐。

top

单元格的内边距的上边缘与行的顶端对齐。

middle

单元格垂直居中。

bottom

单元格的内边距的下边缘与行的底端对齐。

可以取负值。

例子

    
    
    



    

        与基线对齐
        
参考内容Xbaseline基线对齐
    
    

        与参考内容X的下标对齐
        
参考内容Xsub下标对齐
    
    

        与参考内容X的上标对齐
        
参考内容Xsuper上标对齐
    
    

        对象的内容与对象顶端对齐
        
参考内容Xtop要对齐的内容
    
    

        对象的内容与对象中部对齐
        
参考内容Xmiddle要对齐的内容
    
    

        对象的内容与对象底端对齐
        
参考内容Xbottom要对齐的内容
    
    
    

        对象的文本与对象顶端对齐
        
参考内容Xtext-top要对齐的内容
    
    

        对象的文本与对象底端对齐
        
参考内容Xtext-bottom要对齐的内容
    
    

        与基线算起的偏移量
        
参考内容Xlength偏移量对齐