CSS vertical-align 屬性控制在壹行上相鄰設置的元素如何對齊。
vertical-align — 默認值。顧名思義，它將元素與父元素的基線對齊。
top — 將元素與壹行中最高元素的頂部對齊。
bottom — 將元素與底部對齊，元素處於同壹級別。
middle — 將元素與其父元素的中心對齊。
text-top — 使用其父元素行中最高字體的頂部對齊元素。
text-bottom — 使用其父元素行中最高字體的底部對齊元素。
sub — 將元素對齊到其父元素的基線下標。它的行為更像 <sub> 標簽。
super — 將元素與父元素的基線上標對齊。它的行為更像 <sup> 標簽。
將元素與給定單位對齊。正數將使元素與基線上方對齊，負值將使元素與基線下方對齊。
這些值可以是任意長度單位： px ， em ， % ，等。
initial — 將元素的對齊方式設置為其默認值，即 baseline 。
inherit — 將元素的對齊方式設置為其父元素的值。
vertical-align 屬性可以直接應用用於表格單元格，可以將對齊單元格內的內容。重要的壹點是，它能很好的兼容瀏覽器在顯示效果上的壹致性。
效果如下：
vertical-align 屬性不允許您在另壹個元素中 “垂直居中” 壹個元素。我們更多的會使用 Flexbox 來做垂直居中。
但是，您可能不知道，有壹個 ghost 技巧可以幫助您垂直居中壹個元素。
效果如下：