cell-box：包圍內容的最小框。
cell-box的baseline：一般來說為這個cell-box裡第一行文字框從下往上四分之一處(大約，為個人理解)。
這一行的baseline：這一行vertical-align為baseline的所有cell-box，cell-box頂部到該cell-box baseline距離最大的 cell-box的baseline做為這一行的baseline（vertical-align:baseline的inline-replace元素的baseline視為其margin box的底部）。
如上圖，前兩個box的vertical-align都為baseline，要確定這一行的baseline就跟這兩個box有關。這兩個cell-box的baseline到該cell-box頂的最大距離為2號，所以就選2號的baseline做為這一行的baseline。
bottom,top,middle則比較簡單，分別用cell-box的bottom,top,middle與行的相應對齊即可。
上面即為情況一，下面是情況二
用於
inline-level elements （概念1），影響它在其line-box裡的垂直位置。
line-box（概念2）的高度由其中的inline-level元素計算，對於inline-replace元素就為其margin box的height,no-replace元素為其line-height。
用於對齊的兩個對象分別為 line-height box(或margin box)和line-box。
baseline：line-height box(或 margin box)的baseline與line-box的baseline對齊。line-height box的baseline為該box裡最後一行文字從下往上略1/4處（英文e的下沿）,inline-replace元素找到不baseline的，用其margin box的下沿當baseline。
line box的baseline的計算為：line box中所有vertical-align:baseline(沒明顯設定，即預設也為baseline)的line-height box和margin box都參與計算，還有一個臆想的box(strut)，這個box有font和line-height兩個屬性，這兩屬性的值都可以繼承而來。算出每個box中baseline到box頂部的距離，最距離最大的box的baseline做為這個line box的baseline(和上面table-cell裡行的baseline計算差不多)。然後就用相應的位置對齊即可，對齊時可能會改變line box的高度。
middle：inline-height box (或 margin box)的中心對齊line box的baseline再上移x中心的距離（跟
font-size有關，一般直覺上認為中間對中間即可）。
bottom,top：簡單，頂對頂，底對底。
text-top,text-bottom：頂對文字頂，底對文字底。
sub,super：對齊basline，再分別降、升box。
數值：相對baseline調整。
百分比：相對
line-height計算出數值，再相對baseline調整。
分清清兩種情況，瞭解兩個概念，理解兩個相關屬性，再加上一個搞懂baseline的計算這一核心，vertical-algin就差不多了。
來個相關的應用
不定高度圖片垂直置中：
代碼：
<div style="border: 1px solid #CCC; height: 200px;"><span style="width: 1px; display: inline-block; margin-right: -1px; height: 100%; vertical-align: middle;"></span> <img src="http://filesimg.111cn.net/2011/05/20110924004459148.jpg" width="100" style="vertical-align: middle;" /></div>
