css-对vertical-align各个属性的简单理解

vertical-align.png

如图所示，将字母放在四线格里面，然后去对比text-align的每一个属性的位置，从图中可以清楚地看到，每个属性分别是以哪个位置为准对齐的，在middle属性时添加了白线作为中线，也可以看到middle和baseline的一点点差别。
vertical-align是以父元素为基础元素本身的对齐方式，因此我们在div中写入了一个单词作为基准。首先说一下vertical-align的baseline的特别之处，baseline是父元素字母x的底部，你可以理解为父元素里有一个字母x，baseline是元素中字母x的底部与父元素字母x的底部对齐，字母x可以换成任意一个在四线格中只占一格的小写字母如a,c,o等等。

vertical-align各个属性值及表现.png

整段代码如下，可以自己动手看一下效果。

    
    
    
    
    



    

        Aojpf
        

        

        

        

        ja-top
        ja-bottom
        ja-text-top
        ja-text-bottom
        
        ja-middle
        
        ja-baseline

        ja-sub

        ja-super