vertical-align，是一個使用時生不生效全靠運氣的屬性，也是初級前端程序員難以理解的屬性。接下來，將層層撥開vertical-align的神祕面紗，逐步深入掌握vertical-align。
一、周邊概念
首先，你可以先了解幾個概念：
1、基線：一行字橫排時下沿的基礎線，是以英文小寫字母x下端沿的基線。字母’x’在CSS世界中的角色和故事
inline-block行內塊狀元素的基線比較特殊：
注：文字內容是指： inline-block元素呈現的文本內容，還包括，有內容效果的行內元素，比如img，input，select。
1）當 inline-block 元素中有文字內容的時候，inline-block元素的基線是最後一行文字內容（元素）的基線，無論文字內容在什麼子對象容器內、在什麼位置都沒有關係。
2）當 inline-block元素中不存在文字內容的時候，inline-block元素的基線是 容器的margin-bottom底邊緣，與容器內的元素沒有半毛錢關係，就算和內部元素髮生了外邊距合併也沒有任何影響。
2、x-height：基線和主線[mean line](也稱作中線[midline])之間的距離。
3、字體尺寸：font-size的設置值。
4、內聯盒模型，更深入的理解可以參考 CSS盒子模型
5、line-height：設置行間的距離（行高）。
當以百分比或倍數設置時，則根據font-size設置相對值。
p{
font-size: 100px;
line-height: 150%; // line-height的值爲100px * 150% = 150px
}
p{
font-size: 100px;
line-height: 1.5; // line-height的值爲100px * 1.5 = 150px
}
6、行框：line-height 與 font-size 的計算值之差（在 CSS 中成爲“行間距”）分爲兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框（line box）。
二、vertical-align
言歸正傳，vertical-align只對以下元素起作用：inline，inline-block，inline-table，用來指定元素的垂直對齊方式，對於塊級元素，vertical-align是不起作用的。
1、vertical-align：baseline（默認值），使元素的基線同父元素的基線（行框的基線）對齊。
基線 例1：空內容的行內塊狀元素
<span style="border:1px solid blue;">
這是前面的文字
<div style="display:inline-block;width:100px;height:100px;border:1px solid red;">
</div>
這是後面的
</span>
運行結果：
基線 例2：img：像圖片或者輸入框這樣的元素，本身沒有基線，則將其底端同父元素的基線（行框的基線）對齊。
<div>
<img src="./touxiang.png">
這是前面的文字
</div>
運行結果：
基線 例3：有內容的inline-block
<body>
<div style="display:inline-block;width:100px;height:100px;border:1px solid red;">
這是第一個元素的內容
</div>
<div style="display:inline-block;width:150px;height:150px;border:1px solid red;">
這是中間的元素xxx
</div>
<div style="display:inline-block;width:200px;height:200px;border:1px solid red;">
這是最後一個元素的內容
<img src="./touxiang.png">
</div>
文字xxx
</body>
運行結果：
所以當多幾個行內元素及行內塊狀排列時，我們會看到排列參差不齊，原因就在於每個元素的基線位置不同。
那如何讓每個元素垂直 居中排列呢，接下來我們就看vertical-align的另一個值：vertical-align：middle。
2、vertical-align：middle，即內聯元素（設置vertical-align：middle的元素）的垂直中心點（元素的1/2高度處）與行框盒子基線往上 1/2 x-height 處（字母x的正中間）對齊。
給上述的例3，每個div加上vertical-align: middle，則運行效果如下：
三、實例場景
1.圖片+單行文字
<div style="border:1px solid blue">
<img src="./touxiang.png" style="vertical-align: middle;">
<span>xxxx我是一行單行文字</span>
</div>
運行結果：
2.圖片+inline-block
這種場景就適合右邊內容多行及自定義內容的情況。
<style>
.user {
width: 320px;
padding: 10px;
font-size: 0;/*用於消除inline元素存在的幽靈空白節點*/
border: 1px solid red;
}
.user-img {
vertical-align: middle;
width: 30%;
}
.user-info {
border: 1px solid blue;
display: inline-block;
width: calc(70% - 2px);/*margin及border不計入width*/
vertical-align: middle;
font-size: 14px;
}
</style>
<div class="user">
<img src="./touxiang.png" class="user-img">
<div class="user-info">
<p>名字</p>
<p>職務</p>
<p>個人介紹：我是一個水瓶座的女生。</p>
<p>個人介紹：我是一個水瓶座的女生。</p>
<p>個人介紹：我是一個水瓶座的女生。</p>
</div>
</div>
運行結果：
3.單行文本居中
由於文本默認在行中垂直居中，所以將行高設置成父元素的高度，這樣，單行文本就在父元素垂直居中的位置。
<div style="border:1px solid red;">
<span style="line-height: 50px;">我只是一行文本</span>
</div>
運行效果：
除了baseline及middle外，vertical-align還有其它的屬性值（text-top,sub,bottom等）及使用場景（控制table單元格內容的垂直對齊方式），有機會再跟大家一起分享。
部分參考資源：
1.關於 vertical-align 你應該知道的一切: https://juejin.im/post/5e64ee1df265da573e6734ed
推薦相關好文
1.你所不知道的vertical-align: https://www.jianshu.com/p/71a03b8f6eb6