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

ermaoL 發(fā)布于2019-08-30 15:54 / 1954人閱讀

摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設置為，即這個的高度為，位置處于中間。

vertical-align的值

線類：baseline（默認）, top, bottom, middle

文字類：text-top, text-bottom

上標下標類：sub, super

數(shù)值：1px, 1em - 在baseline對齊的基礎上上下偏移一定數(shù)值

百分比：相對于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為數(shù)值的情況下，可以設置font-size為0

inline-block基線

inline-block元素的基線是inline-block內(nèi)最后一個line box的基線；如果inline-block內(nèi)沒有l(wèi)ine 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的中心點是低于容器實際中心線的，字體較小的情況下肉眼看不出區(qū)別而已
https://codepen.io/curlywater...

table-cell元素：table-cell元素的高度有table-row中最高的那一個單元格決定，內(nèi)容未撐滿高度時，使用padding填充

文本類屬性值

text-top：元素頂部和父級content area的頂部對齊
text-bottom：元素底部和父級content area的底部對齊

只與父級的font-size有關，與父級line-height無關，與兄弟元素的line-height無關

上標下標類屬性值

super：提高元素的基線到父級的上標基線位置
sub：降低元素的基線到父級的下標基線位置

相鄰元素不同vertical-align的行為表現(xiàn)

關注自身和父級，前后元素并沒有影響

vertical-align的應用

多行文字垂直居中

https://codepen.io/curlywater...

容器指定高度

需要居中的行內(nèi)元素設置display: inline-block; vertical-align: middle

加一個與容器高度相同，vertical-align: middle; display: inline-block輔助元素

GPU云服務器云服務器深入理解webrtc之a(chǎn)ec 如何深入理解深度學習深入理解系列深入理解linux

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117044.html

【學習筆記】CSS深入理解之line-height

摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結論和設置一致，并非是完全垂直，除非為。張鑫旭的CSS深入理解之line-height學習筆記 line-height的定義行高：兩行文字基線之間的距離為何是基線：基線是定義所有字線的根本不同字體...

Stardustsky 2019-08-30 15:54 評論0 收藏0
關于vertical-align

摘要：內(nèi)聯(lián)元素的外邊緣與該行高的頂部和底部邊緣對齊。如果行高小于字體的高度，不會受影響，但會對齊文本邊界。紅線表示邊界，藍線表示，黃色為，白色為區(qū)域，綠色為區(qū)域。的確定規(guī)則元素的是它的第一行的。前言為什么寫這篇總結？最近在文字圖標垂直對齊上用到css的vertical-align屬性，但是有的時候有效，有的時候無效，常常疑惑不解，反思這是自己對vertical-align的基本認知不夠造...

kumfo 2019-08-30 15:44 評論0 收藏0
深入理解css之vertical-align

摘要：但實質上，只要是內(nèi)聯(lián)元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設置為設置為總結講解了的各類屬性值及其效果起作用的前提是內(nèi)聯(lián)元素與都是同時作用在內(nèi)聯(lián)元素上的前言 vertical-align用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...

cgh1999520 2019-08-30 15:53 評論0 收藏0
CSS學習筆記－圖片img與父元素div之間的間隙解決

摘要：前言之前在寫網(wǎng)頁的時候有一個展示圖片的需求我使用一個包裹一個但是在瀏覽器中預覽的時候碰到了一下的問題仔細看圖片和之間有間隙。正文指定了行內(nèi)元素或表格單元格元素的垂直對齊方式摘錄自。設置父元素字體大小為所用的值是無單位數(shù)值乘以元素的。前言之前在寫網(wǎng)頁的時候有一個展示圖片的需求,我使用一個div包裹一個img,但是在瀏覽器中預覽的時候碰到了一下的問題,showImg(https://s...

Chiclaim 2019-08-30 12:44 評論0 收藏0