【學習筆記】CSS深入理解之vertical-align

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，但基線與底邊重合，仍舊是基線對齊，此時元素和容器貼合。

對齊方式總結：

1. 清除vertical-align

   1. 修改vertical-align值
   2. 元素block化

2. line-height為0

   1. 設定line-height為0
   2. 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…

1. 容器指定高度
2. 需要居中的行內元素設定display: inline-block; vertical-align: middle
3. 加一個與容器高度相同，vertical-align: middle; display: inline-block輔助元素