深入理解css中vertical-align属性

举例：  

<style type="text/css">
    .ctn-block{
        display: block;
        background-color: #bbb;
        line-height: 200px;
        font-size: 50px;
    }
    .ctn-block .child1{
        display: inline-block;
        width: 100px;
        height: 100px;
        margin:10px 0;
        vertical-align: baseline;
        background-color: aliceblue;
    }
</style>

<div class="ctn-block">
    <div class="child1"></div>
    <span>Gg</span>
</div>

分析：

父元素.ctn-block的base-line是Gg的baseline，

inline-block元素因为没有内部line box，也没有设置overflow:visible，所以其baseline是底margin边界。

四、vertical-align基于baseline的不同取值

1、baseline

将子元素盒子的baseline与父盒子的baseline对齐。

2、middle

将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐

这里元素盒子的垂直中点容易确定，父盒子的baseline也好确定，但是x-height要进行计算得到，这个x-height就是字母x的高度。

 3、text-top

将盒子的顶端(margin-top边界)与父盒子的文本区域顶端对齐

审查盒子看到margin-top的顶端。

审查文本，看到蓝色区域的上边界就是文本区域顶端。

最终效果就是盒子的顶端与父盒子文本区域顶端对齐。

4、text-bottom

将盒子的底端（margin-bottom边界） 与父盒子的文本区域底端对齐

和text-top类似，不过将子元素的margin-bottom和文本区域的下边界对齐。

5、sub

将子元素盒子的baseline降低，到适当的父盒子的下标位置

子元素的baseline已经确定了，就是margin-bottom下边界，但是父盒子的下标位置太不好理解。。。首先需要了解下标这个概念，我们可以通过<sub>标签为文字添加下标，将<span>中的内容修改为Gg_Gg，就会有如下效果。

这里就是将元素的margin-bottom下边界和下标的baseline对齐。

6、super

将元素盒子的baseline升高，到适当的父盒子的上标位置。

与sub对应，super提升到上标内容的baseline处，首先通过<sup>标签创建上标。

7、percentage

百分比：升高（正值）或降低（负值）子元素盒子，具体的升高/降低数值由父盒子的line-height的值乘以百分比计算得出。如果百分比为0%，就和vertical-align:baseline一样。

这个是相当好理解的，就相当于子元素盒子的baseline升高或降低，具体数值为百分比乘以父盒子的line-height。

本例中，父盒子的line-height为200px，所以设定25%，元素应该上移50px。

并不是很直观，给它加上一个transform: translate(0, 50px);【相对下移50px】，它又移到那个熟悉的位置了。

8、length

升高（正值）或降低（负值）子元素盒子。值为升高/降低的距离，如果为0，和vertical-align:baseline一样。

以我们最常用的px作为单位，设定vertical-align:50px，效果就和上面百分比为25%（200px*25%=50px）一样了，不做例子了。

五、vertical-align基于line box的不同取值

当vertical-align设置为top和bottom时，其就不是按照baseline进行定位了，而是根据line box进行定位。子元素盒子的顶部和底部也就是其上下margin外边界。

1、top

将子元素盒子的顶部和其所在的line box顶部对齐