或许我们都知道垂直对齐使用vertical-align但是具体怎么使用呢
看下面一个例子，如下图，我左侧跟右侧都是使用了display: inline-block;但是并没有使用任何的vertical-align属性。
先来看看vertical-align属性官方怎么说的。
vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
这样给到的解释可能让我们很难理解，下面我们一起来看一看这个属性具体该怎么理解
如下，我们的行内元素大家可以理解成有这样子的几根线条
我们的vertical-align有这样一些属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img.text-top {vertical-align:text-top;}
img.text-bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p>
</body>
</html>
baseline：默认。元素放置在父元素的基线上。
我们举例上面一个例子，在块元素中有行内元素（文字），跟行内块元素（img）,那么img标签会取默认值baseline，下方跟基线对齐，基线图看上面，效果如下
sub：垂直对齐文本的下标。
super 垂直对齐文本的上标
上标下标如下图理解
top 把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
当我们在img身上使用上text-top时效果如下
middle 把此元素放置在父元素的中部。
bottom 使元素及其后代元素的底部与整行的底部对齐。
text-bottom: 把元素的底端与父元素字体的底端对齐。
这里效果跟bottom效果是一样的，但是当img是div设置成的行内块元素并且有后代元素时，可能能看出差距，这里笔者不仔细向下研究，感兴趣的效果伴可以继续向下研究。
length 将元素升高或降低指定的高度，可以是负数。
当vertical-align: 20px;基于基线向上移动20px,效果如下
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
100%时从基线向上移动文字行高的100%，效果如下图
-100%时从基线向上移动文字行高的100%，效果如下图
inherit 规定应该从父元素继承 vertical-align 属性的值。
父元素没有写vertical-align属性，所以默认时baseline,得到效果就是baseline如下
再回到我们最开始的问题，两个display: inline-block；元素并列时并没有给任何一个元素设置vertical-align属性，那么两个元素为什么排列不齐。
补充下面两点
1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline
2.对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线
再来看，我们的这两个行内元素显然里面都有文字，并不是空的，那么我们后面的元素再找基线的时候，就会找到前面元素内部最后一行内联元素的基线，这里可以理解为前面行内块元素以后面的行内块元素基线来实现对齐。那么在这里问题是不是就很明显了
那么最好的解决方式是，改变vertical-align属性，将另外一个vertical-align属性值更改为top
