终于搞定了vertical-align：baseline对齐的问题

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

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

进入正题：

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

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

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

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

图片和xxx都属于行内元素，可以看到他们的底部是对齐的。

<div class="div1">
    <img src="https://img.alicdn.com/bao/uploaded/i1/1780989163/TB1gFpJlf2H8KJjy0FcXXaDlFXa_!!0-item_pic.jpg_300x300q90.jpg" alt="">
    <span>xxxxxxxx</span>
</div>复制代码

span{
    vertical-align:baseline;
}复制代码

那么基线位置在什么情况下会改变呢？

• 如果父级元素高度被某个子元素撑开
  

如果这个子元素是图片，改变图片的高度会改变基线的位置；

如果这个子元素是文字，改变字体的 font-size和 line-height属性，都会改变基线的位置

• 如果父级元素中包含多个含有 inline-block属性值的元素，且这些元素都设置了 vertical-align：baseline属性，那么会出现一个好玩的现象，这一行上面所有的元素都会是一个基线，改变一个元素的基线，其他所有元素的基线都会改变。基线的位置会跟基线最低的子元素或者父级元素的基线对齐。

上面就是关于baseline值的相关问题

其他值如下的描述如下：

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