vertical-align的值
- 線類：baseline（預設）, top, bottom, middle
- 文字類：text-top, text-bottom
- 上標下標類：sub, super
- 數值：1px, 1em – 在baseline對齊的基礎上上下偏移一定數值
- 百分比：相對於line-height計算
vertical-align起作用的前提
只作用於inline水平元素以及`table-cell`元素
注意：float和position: absolute會使元素塊狀化
vertical-align與line-height
inline元素都有vertical-align和line-height，預設基線對齊
inline元素對齊
https://codepen.io/curlywater…
上例中，inline元素預設基線對齊，並未和容器貼合；
設定vertical-align為top，這時不再與基線對齊，和容器貼合；
設定line-height為0，但基線與底邊重合，仍舊是基線對齊，此時元素和容器貼合。
對齊方式總結：
-
清除vertical-align
- 修改vertical-align值
- 元素block化
-
line-height為0
- 設定line-height為0
- line-height為數值的情況下，可以設定font-size為0
inline-block基線
inline-block元素的基線是inline-block內最後一個line box的基線；如果inline-block內沒有line box或者其本身的overflow不為visible，基線是自身的margin底邊緣。
https://codepen.io/curlywater…
上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為line box的基線；
將右邊盒子的行高設定為0，即baseline這個line box的高度為0，位置處於content area中間。
線類屬性值
bottom
inline|inline-block元素：元素底部和父級底部對齊
table-cell元素：底padding邊緣和table-row底部對齊，多餘部分padding填充
top
inline|inline-block元素：元素頂部和父級頂部對齊
table-cell元素：頂padding邊緣和table-row頂部對齊，多餘部分padding填充
middle
inline|inline-block元素：元素的垂直中心點和父元素基線上的1/2 x 高度處對齊，也就是x的中心點
使用vertical-align:middle只是近似垂直居中，因字元有下沉的特性，所以x的中心點是低於容器實際中心線的，字型較小的情況下肉眼看不出區別而已
https://codepen.io/curlywater…
table-cell元素：table-cell元素的高度有table-row中最高的那一個單元格決定，內容未撐滿高度時，使用padding填充
文字類屬性值
text-top：元素頂部和父級content area的頂部對齊text-bottom：元素底部和父級content area的底部對齊
只與父級的font-size有關，與父級line-height無關，與兄弟元素的line-height無關
上標下標類屬性值
super：提高元素的基線到父級的上標基線位置sub：降低元素的基線到父級的下標基線位置
相鄰元素不同vertical-align的行為表現
關注自身和父級，前後元素並沒有影響
vertical-align的應用
多行文字垂直居中
https://codepen.io/curlywater…
- 容器指定高度
- 需要居中的行內元素設定
display: inline-block; vertical-align: middle - 加一個與容器高度相同，
vertical-align: middle; display: inline-block輔助元素