vertacil-align的使用对象
vertacil-align适用于行内元素，即具有以下属性的元素标签
inline inline-block inline-table
在行内元素布局中，所有的元素在一行显示，当显示不下的时候会另起一行继续排列，那么具有行内元素的一行叫做行盒子，行盒子占据的空间包含当前行+盒子内部元素所达到的高度差；如下图：
行盒子的基线是可变动的，默认情况下，行盒子基线都会主动重合基线最下的行内元素，其他行内元素依据自己的基线基线准则，重合行盒子基线；
行内元素基线分为以下几种情况：
1：当前有文字或图片（或者内部为空的行内元素设置了大小）那么默认的基线为高者的底部外界；
2：当前有文字+行内div（内部具有流文字）那么行内div的基线以内部流文字为准；
3：当前有文字+行内div（内部有流文字，但是设置了overflow：hidden）那么行内div的基线以底部为准；
那么对应单个行内元素，怎么调节与其他行内元素的对齐方式呢？
基线方式：
baseline ：元素基线与行盒子基线重合
sub ：元素基线移动至行盒子基线下方。
super:元素基线移动至行盒子基线上方
%:元素基线相对于行盒子基线向上或向下移动，移动距离等于
line-height 的百分比px...:元素基线相对于行盒子基线向上或向下移动指定的距离。
上下边界方式
middle ：元素上、下边的中点与行盒子基线加上x-height的一半对齐。相对于行盒子的文本盒子对齐元素的外边界
text-top ：元素的顶边与行盒子的文本盒子的顶边对齐。
text-bottom ：元素的底边与行盒子的文本盒子的底边对齐。
相对于行盒子的外边界对齐元素的外边界
top ：元素的顶边与行盒子的顶边对齐。
bottom ：元素的底边与行盒子的底边对齐。