摘要:關于的條參考線以及。關于和之間的關系。目標元素的的垂直平分線,與父元素內匿名的對齊。垂直平分線,這個容易理解。要比這些字母的頂端再高一些。
前言
關于 vertical-align,我們很容易想到,這不就是告訴我們元素在縱向上和什么對齊的屬性嗎?而事實上,正是這種寬泛的說法導致了我們對其的理解存在許多不確定性。事實上,“對齊”這兩個字其實牽涉到4個對象:即哪個對象的哪條線,與哪個對象的哪條線對齊?只有將這4者搞清楚,我們才能說是理解了這個屬性。
我們知道,vertical-align 有以下幾類可選值:
文字:baseline、top、bottom、text-top、text-bottom、middle、sub、super
百分比
數字
其中,文字是最多的,現在我就以文字為例,來探討以下vertical-align究竟是怎么對齊的。在閱讀之前,有一些預備知識應該是必不可少的,它們是:
關于行內元素的4種box模型:containing boxes、inline boxes、line box 以及 content area。
關于 font-size 的 4 條參考線:topline、bottomline、baseline以及middleline。
關于 font-size 和 line-height 之間的關系。
以上知識可以在以下文章中看到
深入了解css的行高Line Height屬性
下面是這次我使用的例子。
html:
</>復制代碼
0.Eng2lish3
Englishx
css:
</>復制代碼
.box{
border: 1px solid #555;
font-size: 28px;
height:150px;
line-height: 100px;
}
.span{
display: inline-block;
background-color: #ffffd;
font-size: 50px;
margin-right: 35px;
line-height: 80px;
}
vertical-align:top
目標元素的 inline-box 的頂端邊緣,與父元素的 line-box 的頂端邊緣對齊。這很好理解。
vertical-align:bottom目標元素的 inline box 的底端邊緣,與父元素的 line-box 的底端邊緣對齊。同樣很好理解。
不過,這里有同學說了:不對啊,圖片里目標元素的底端沒有和父元素的底端對齊啊!注意,上面寫的是與父元素的 line-box 的底端邊緣對齊。那么父元素的底端邊緣在哪里呢?并不是在下邊框這里。這是因為,下邊框是被父元素的 height 屬性撐開的,父元素的 line box 的高度,是由 line-height 屬性決定的。注意看上面的 css。這里的 line-height 比 height 要小,所以目標元素的底部達不到父元素的下邊框。
還有一部分眼尖的同學說,還是不對呀,我目測了一下,你 css 里設置的 line-height 是 100px。但是這里目標元素的底部,離父元素的頂部似乎要大于 100px 呀?是的,你說的沒錯。實際上這個數字是118px,原因是,內部匿名inline box 的上標(3)和下標(2)把這個匿名 inline box 的line-height 撐大了,導致其實際 line-height 達到了 118px。如果把上標下標去掉,那就完美符合啦。
vertical-align:middle目標元素的 inline-box 的垂直平分線,與父元素內匿名inline boxes的 middleline 對齊。這個屬性恐怕是實戰中使用最頻繁的屬性了。
這里出現了幾個新東西,需要多說幾句。垂直平分線,這個容易理解。那什么是“父元素內匿名inline boxes,什么又是“父元素內匿名 inline boxes 的 middleline”?
首先,父元素內匿名inline boxes,你可以假設成直接寫在父元素內的純文字。由于它被父元素直接包裹,所以各種屬性,包括line-height 和 font-size 等等,都是直接繼承自父元素。當然,父元素內未必真的存在文字,它內部可能沒有任何匿名inline boxes,但是,當 vertical-align 參與計算的時候,所參照的就是這個可能并不存在的匿名inline boxes。
好了,輪到 middleline。middleline 之前被我放在了預備知識里,這里再多引申一點。按照規范,middleline 是文字的 baseline 往上方挪 1/2 個 x字母高度 的位置,所在的那條線。這條線并不是content area的嚴格中線,但和真正幾何位置的中線很接近。
為了更清楚地表示 middleline 的位置,我這里多加了3個 x 字母,很明顯,middleline 穿過字母 x 的中央。
好了,理解了 vertical-align:middle ,我們再理解下面幾個屬性就簡單多了。
vertical-align:text-top目標元素的 inline-box 的頂部邊緣,與父元素內匿名 inline boxes 的頂線,topline對齊。這里要注意,topline 在視覺上并不和l、h這些高字母的頂端對齊,這是因為這些字母的高度都沒有達到topline。topline 要比這些字母的頂端再高一些。
vertical-align:text-bottom目標元素的 inline-box 的底部邊緣,與父元素內匿名 inline boxes 的底線,bottomline對齊。和 topline 不同,像 g 這樣的下沉字母的底端一般都會達到 bottomline 的位置。
vertical-align:baseline這個默認屬性反而放到后面來說?為什么?因為這里和上面有一點不同。在上面的情況下,目標元素參與對齊的參考線,都是 inline-box 的上下邊緣,而這里是 baseline!
vertical-align:sub目標元素的 inline-box 的 baseline,與父元素內下標(sub 標簽)的 inline boxes 的 baseline 對齊。
vertical-align:super目標元素的 inline-box 的 baseline,與父元素內上標(sup 標簽)的 inline boxes 的 baseline 對齊。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/116426.html
摘要:內聯元素的外邊緣與該行高的頂部和底部邊緣對齊。如果行高小于字體的高度,不會受影響,但會對齊文本邊界。紅線表示邊界,藍線表示,黃色為,白色為區域,綠色為區域。的確定規則元素的是它的第一行的。 前言 為什么寫這篇總結?最近在文字圖標垂直對齊上用到css的vertical-align屬性,但是有的時候有效,有的時候無效,常常疑惑不解,反思這是自己對vertical-align的基本認知不夠造...
摘要:絕對定位讓元素脫離文檔流,所以他們不再影響他們的周邊元素。元素在文檔流中,也能感知其他元素尺寸的改變。中間,一個在文檔流中的元素并且帶有屬性的元素。最右,不在文檔流中的元素但是內容區域有高度。元素的基線依賴于元素是否是文檔流中的元素。 原文:Vertical-Align: All You Need To Know 通常我都有需要垂直對齊在一排上一個接著一個的元素。CSS提供了很多種可能...
摘要:之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習,再次謝謝張大大阮大大的各種分享。 對于元素的水平居中,我根據我自己之前的一些學習來進行一些總結,如果有不對的地方,歡迎指正~ 一、讓大小不固定的元素垂直居中 因為:表格的單元格的特別屬性:垂直居中等; `div.parent { display: table-cell; vertical-align...
摘要:之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習,再次謝謝張大大阮大大的各種分享。 對于元素的水平居中,我根據我自己之前的一些學習來進行一些總結,如果有不對的地方,歡迎指正~ 一、讓大小不固定的元素垂直居中 因為:表格的單元格的特別屬性:垂直居中等; `div.parent { display: table-cell; vertical-align...
摘要:先來一張圖,看懂的幾個屬性順便帶上圖片出處,文章講得還可以,理解這張圖片,后面就好理解了。元素根據標簽的屬性決定顯示輸入框還是按鈕。還有,還有近來很火的。 最近看到一篇20 個CSS高級技巧匯總的匯總,感觸很深,不過我想,與技巧相比,有些常見css布局難題,有時候更加讓我們的日常開發變得躊躇沮喪吧。在寫這一篇文章之前,自己還寫過一篇:我所不注意的那些CSS冷知識,但卻阻止了我做項目的速...
閱讀 3051·2021-11-22 09:34
閱讀 2518·2021-09-30 09:47
閱讀 1456·2021-09-03 10:32
閱讀 3725·2021-08-16 10:49
閱讀 1796·2019-08-30 15:55
閱讀 2471·2019-08-30 15:52
閱讀 3331·2019-08-30 15:44
閱讀 1365·2019-08-30 15:44