摘要:的邊界是該行內的最高點和最低點,即的頂部邊緣是該行內最高的頂部邊緣,底部邊緣是該行內最底的底部邊緣。是垂直對齊發生的區域。將文本去掉,會發現父元素高度不變。元素的基線通過絕對長度相對于的基線進行偏移。
一、適用元素
vertical-align適用于inline-level元素,即inline,inline-block或inline-table 。
二、inline與inline-block元素的外邊緣和基線 inline元素的外邊緣和基線inline元素的外邊緣是由它的line-height決定的。
紅線:元素外邊緣,即行高的頂部和底部邊緣。
綠線:字體的高度。
藍線:基線。
上圖中,左側的那個,文本的行高設置為與字體大小相同的高度。上下兩邊綠色和紅色的線均重合為一條線。中間的那個,行高是字體高的兩倍。右邊的那個,行高是字體高的一半。
inline-block元素的外邊緣和基線inline-block元素的外邊緣就是它的margin-box的頂部和底部邊緣。
紅線:元素外邊緣,即margin-box的頂部和底部邊緣。
藍線:基線。
上圖中從左到右可以看到:一個inline-block元素里面有in-flow內容(一個“C”),一個inline-block元素有in-flow內容和overflow: hidden,一個inline-block元素沒有in-flow內容(但是內容區域有高度)。
Inline-block元素的基線取決于元素是否具有in-flow內容:
有in-flow內容,inline-block元素的基線是普通流中最后一個內容元素的基線(例如左邊那個)。對于最后一個元素,它的基線是根據它自己的規則確定位置的。
有in-flow內容并且使用了值不是visible的overflow,基線就在margin-box的底部邊緣那個位置(例如中間那個)。因此,它與inline-block元素的底部邊緣一樣。
沒有in-flow內容,基線也是在margin-box的底部邊緣那個位置(例如右邊那個)。
例如:下圖中紫色為基線,兩個span均是基線對齊。兩幅圖對比可以看出,隨著第一個span元素中內容的增多,基線下移了。
士大夫和健康
士大夫和健康士大夫和健康
【注】:如果一個元素是浮動的(float:left/right),絕對定位的(position:absolute/fixed)或者是根元素(html),那么它被稱之為流外的元素(out-of-flow)。如果一個元素不是流外的元素,那么它被稱之為流內的元素(in-flow)。
三、content-area、inline box和line boxcontent-area:在非替換元素中,指元素中每個字符的字體大小串在一起所組成的框;在替換元素中,元素的固有高度加上任何margins, borders或padding。
inline box:每個元素的content-area加上leading。對于非替換元素,元素的inline box的高度等于line-height的值;對于替換元素,元素的inline box的高度等于該元素的固有高度加上任何margins, borders或 padding。
line box:一行就是一個line box。line box的邊界是該行內inline boxes的最高點和最低點,即line box的頂部邊緣是該行內最高inline box的頂部邊緣,底部邊緣是該行內最底inline box的底部邊緣。
line box的文本盒和基線文本盒可以當做是放在line box里面的沒有任何對齊的行內元素。文本盒的高度等于它的父元素的字體大小。因此,文本盒只是把line box的無格式文本圍起來了。這個盒子就是下圖中用綠線標出來的那個。因為這個文本盒與基線相關聯,當基線移動時,它也移動。
line box的基線無法定義。line box的基線被放在能夠實現所有條件的地方。
綠色:line box的文本盒。
紅色:line box的頂部和底部邊緣。
藍色:基線。
灰色:文本元素的區域。
查看line box基線的方法:在行的開頭增加一個字符,就像上圖中增加的“X”。它默認地坐在基線上。line box是垂直對齊發生的區域。line box有一條基線,一個文本盒和一個頂部和底部邊緣。
line box高如何計算當一行中僅有行內不可替換元素,且這些元素都是相同的 font-size、line-height和vertical-align。則content-area=font-size, line-box的高=line-height。
當一行中包含行內元素,這些元素包括可替換和不可替換,這些元素有不同的 font-size和 line-height。則按以下方式計算:content-area的高由每個不可替換元素的font-size,以及替換元素的固有高度和任何padding, borders,或margins決定。leading應用于每一個元素,一半放在頂部,一半放在底部。line box的頂部邊緣是該行內最高inline box的頂部邊緣,底部邊緣是該行內最底inline box的底部邊緣。
例如:
anchor angry text bold
anchor的content-area是128pt,但是他的inline box是12pt。假設字體是Helvetica,那么
descent : 128pt*219/1000=28pt ascent : 128pt*781/1000=100pt halfleading : (12pt-128pt)/2 = -58pt inline box的top:100pt-58pt=42pt inline box的bottom:58pt-28pt=30pt
所以這個inline box的top為基線上42pt,bottom為基線上30pt。同理可得匿名文本angry text的top是基線上10pt,基線下2pt。所以line-box的高是44pt:基線上42pt,基線下2pt。
將angry text文本去掉,會發現父元素P高度不變。
原因:根據W3C規范:
在由inline-level元素組成的塊容器元素中,line-height確定了該元素內部line boxes的最小高度。這個最小高度由基線上的最小高度和基線下的最小深度組成,就像每個line box都是由寬度為零,擁有父元素的font-size和line-height的inline box(假想元素)開始的。
我的理解是line box是在這個假想元素的基礎上往兩邊延伸。例如:
p元素中只有anchor文本,但是該文本的inline box的top為基線上42pt,bottom為基線上30pt。所以line box的top為基線上42pt,而line box的bottom不是基線上的30pt,而是原先假想元素的基線下的最小深度(即上圖中藍線到最后一條紅線的距離)。
因此,即使沒有angry text文本,基線下也會有一個最小深度,所以導致P元素的高度不變。
注:
例子中計算Helvetica字體用的219和781是修改過的數據,只是為了讓數據好看點,實際應該是接近于225和775。
leading = line-height - font-size。
其中一半leading加到文字上方,另一半leading加到文字下方。
line-height對可替換元素的inline box沒有影響,但是當該元素的vertical-align值為百分比時,是有影響的。
四、Vertical-Align的值baseline:元素的基線在line box的基線頂部。
sub:元素的基線移動到line box基線以下。
middle:元素頂部和底部兩者間的中點與line box的基線加上二分之一的x-height對齊。
text-top:元素的頂部邊緣與line box的文本盒的頂部邊緣對齊。
text-bottom:元素的底部邊緣與line box的文本盒的底部邊緣對齊。
top: 元素的頂部邊緣與line box的頂部邊緣對齊。
bottom:元素的底部邊緣與line box的底部邊緣對齊。
五、Vertical-Align的詭異行徑 Line Box的基線的移動例如:
div { font-size: 16px; line-height: 1; background-color: #eee; margin-top: 10px; } .tall-box { border: 1px solid red; width: 40px; height: 40px; display: inline-block; } .short-box { border: 1px solid black; width: 40px; height: 10px; display: inline-block; }Exg
若將tall-box的vertical-align變成top,得下圖
從上下兩幅圖對比可以看出,隨著vertical-align從text-top變成top,Exg往上移,導致字體高超出了父div的邊界。這是由于line-height的高小于字體高。
若將第一個圖中的父div的line-height變為2,使Exg的line-height值大于字體原本的高度,則得下圖。從圖中可以看到,紅框下降了,父div的高度變高了。這是由于紅框是text-top對齊,由此可知道基線位置在哪里。而基線位置的確定可以確定Exg和黑框的位置。而line box的頂部邊緣是該行內最高元素的頂部邊緣,這時候最高的是Exg,因此可以看到紅框下降,父元素變高了。
Inline-Level元素的底下間隙可以看到li元素底下有間隙。
間隙產生的原因:因為列表項位于基線上,而在基線下是放文本descenders空間。
取消該間隙的方法:
設置li元素vertical-align: middle;
在li元素內添加內容。因為內容會將基線上移。
參考自:
inline-format
【譯】Vertical-Align: All You Need To Know
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/50575.html
摘要:的邊界是該行內的最高點和最低點,即的頂部邊緣是該行內最高的頂部邊緣,底部邊緣是該行內最底的底部邊緣。是垂直對齊發生的區域。將文本去掉,會發現父元素高度不變。元素的基線通過絕對長度相對于的基線進行偏移。 一、適用元素 vertical-align適用于inline-level元素,即inline,inline-block或inline-table 。 二、inline與inline-bl...
摘要:方法二利用,設置元素結構,并應用實現垂直居中,這種方法的實現可用于多行文本,要求及以上版本。 讓元素居中對齊是非常常見的需求,首先是水平居中,要實現水平居中行內元素只需要在其父元素上設置text-align: center即可,對于塊級元素來說讓它的margin-left: auto和margin-right: auto即可(width不可為auto),那么垂直居中呢?找下css屬性發...
摘要:上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中,內聯元素的垂直對齊是比較常見和基礎的布局需求,但是我們往往會因為垂直對齊中的,而頭疼不已。 上一篇:《CSS世界》筆記二:盒模型四大家族下一篇:《CSS世界》筆記四:流的保護與破壞 寫在前面 在頁面布局中,內聯元素的垂直對齊是比較常見和基礎的布局需求,但是我們往往會因為垂直對齊中的1px,2px而頭疼不已...
摘要:左起第一個矩形內部有文字,屬于內聯元素,那么第一個的基線為內部的基線,第二個的內部無內聯元素,那么它的基線就是的底端,第三個內部有內聯元素,但是他的屬性為,不是,所以它的基線還是的底端。 看似三個最常見的概念背后卻隱藏了很深的很深水 那有多深呢,先來看下面的代碼 引出問題 .inline-block { display: inline-block; } ...
摘要:左起第一個矩形內部有文字,屬于內聯元素,那么第一個的基線為內部的基線,第二個的內部無內聯元素,那么它的基線就是的底端,第三個內部有內聯元素,但是他的屬性為,不是,所以它的基線還是的底端。 看似三個最常見的概念背后卻隱藏了很深的很深水 那有多深呢,先來看下面的代碼 引出問題 .inline-block { display: inline-block; } ...
閱讀 2832·2021-11-22 15:11
閱讀 3556·2021-09-28 09:43
閱讀 2903·2019-08-30 13:05
閱讀 3442·2019-08-30 11:18
閱讀 1457·2019-08-29 16:34
閱讀 1314·2019-08-29 13:53
閱讀 2920·2019-08-29 11:03
閱讀 1670·2019-08-29 10:57