vertical-align：baseline对齐的问题

对于行内元素，或者用设置display为inline-block的元素而言，

垂直对齐方式并不能很好的像我们想象中的那样对齐。

进入正题：

vertical-align所有属性值：baseline，top，middle，bottom，text-top，text-bottom

属性的作用范围：vertical-align只对内联元素（或者display：inline-block的块级元素）有效，并根据父级元素的位置定位。

• 通俗来讲就是：此属性是为了确定此行内元素在他父级元素中的垂直距离

baseline：默认属性，根据父级元素的基线定位，那么父级元素的基线位置怎么确定呢？这里要涉及到神奇的小写字母x，标准规定，基线的位置在小写字母x的底部所在直线的位置

其他值如下的描述如下：

值	描述
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。