vertical-align定義行內元素（inline和inline-block）的基線相對於該元素所在行的基線在垂直方向上的對齊方式，即與匿名文本大寫字母X底邊對齊，默認值baseline，當屬性值為數值或百分比時正負值均可。
屬性值介紹：
baseline表示元素基線和父元素基線對齊
sub表示降低元素的基線到父元素合適的下標位置，這個合適位置由瀏覽器決定
super表示升高元素的基線到父元素合適的上標位置
top元素頂端與行框（line box）頂端對齊
middle元素的中垂點與父元素基線加1/2父元素中大寫字母X的高度（個人理解：元素頂端與行框中字母X的中線對齊）
bottom元素底端與行框底端對齊
text-top元素頂端與父元素內容區頂端對齊
text-bottom元素的底部與父元素內容區底部對齊
length元素基線相對於父元素基線的上下偏移，為正值時向上偏移，為負值時向下偏移
%元素基線相對於父元素基線上下偏移，偏移值是相對於父元素行高而非高度
關於上面涉及到的一些感念，可參考這篇文章：深入理解line-height
各屬性值結果：
百分比解析
.t {
font: 40px '宋體';
width: 500px;
background-color: lightgreen;
line-height: 1;
margin-bottom: 40px;
}
由於瀏覽器默認的行高一般是1.2，為了不影響計算我重置了行高為1。由字體大小為40px可計算得出行高為40 * 1 = 40px，所以在上面的例子中，當使用設置vertical-align: 10%時，可以計算出元素的偏移量為40 * 10% = 4px。需要注意的是不要被子元素的行高影響，子元素的行高只影響父元素的高度，不會影響父元素的行高。
圖片底部間隙
<div style="background-color: yellow;">Xg
<img src="https://cdn.86886.wang/blog/1520049889768.jpg" alt="">
</div>
結果：
上面圖片的底部間隙產生的原因是因為圖片垂直方向上默認是基線對齊(vertical-align: baseline)，即圖片的底部與匿名文本大寫字母X的底部對齊，而匿名文本默認是有行高的，所以就有了底部的間隙。
解決方法：
方法1：把圖片display設置為block，因為vertical-align屬性對block元素是無效的。
方法2：把父元素的行高設置為0，這樣子元素的行高繼承以后也就是0，沒有了行高自然沒有了間隙。
方法3：把圖片的vertical-align設置為top/middle/bottom中任一值
圖片垂直居中
<style>
.t1 {
width: 250px;
line-height: 250px;
font-size: 0;
background: green;
text-align: center;
}
.t1 img {
vertical-align: middle;
}
</style>
<div class="t1">
<img src="https://cdn.86886.wang/blog/1520049889768.jpg" alt="">
</div>
結果：
多行文本的垂直水平居中
<style>
.t2 {
width: 150px;
line-height: 100px;
font-size: 0;
background: green;
}
.t2 span {
display: inline-block;
font-size: 16px;
line-height: 1.5;
vertical-align: middle;
}
</style>
<p class="t2">
<span>你好你好你好你好你好你好你好</span>
</p>
結果：
你好你好你好你好你好你好你好