關於 vertical align 的一些小知識

2022-07-27 01:03:13 字數 2742 閱讀 8227

在日常開發過程中,我們經常會遇到如下的場景,一行中既有也有文字,而且還要和文字對齊。效果如下:

通常**如下:

some text.

得到的效果卻是這樣的:

修改下文字為行內塊盒子,並設定行高與盒子高度(盒子高度與高度相同)一致,效果如下:

我們發現文字區域始終與錯開了一些。怎麼解決呢?設定文字的 margin 或者將浮動並不是我們想要的方案。

那麼到底是什麼原因導致了上面的問題呢?各種搜尋後,發現實際上是行盒子內部在豎直方向上的對齊方式在作祟。

在搜尋過程中發現一篇很不錯的介紹 vertical-align 的文章,搬運如下,原文請參考vertical-align: all you need to know。

vertical-align 被用來對齊行級元素(inline-level elements)。所謂的行級元素就是那些 display 屬性為如下值得元素:

inline elements 基本上都是一些包含文字的標籤(span etc.)。

inline-block elements,顧名思義,就是行內的塊元素,它們可以擁有高度、寬度、內邊距、邊框和外邊距。

我們都知道,行級元素沿著當前行依次排列,當當前行已經被填滿時會重新建立一行。這些行就是所謂的行盒子(line box)。每個行盒子的高度依它們各自的內容的高度的不同而不同。下圖就展示不同高度的行盒子,紅線表示行盒子的上下邊界。

在這些行盒子內部,元素通過 vertical-align 屬性來進行對齊,那具體是參照什麼來對齊呢?

對於豎直方向上的對齊來說,最重要的乙個參考點就是元素的 baseline。在某些情況下也會參考元素盒子(element's enclosing box)的上下邊界。

上圖中,紅線表示行高的上下邊界;綠線表示文字的高度;藍線表示 baseline 的位置。在左圖中,文字的高度與行高相同,紅線和綠線重合了。在中間的圖中,行高是文字高度的兩倍。在右圖中,行高是文字高度的一半。

行內元素的外邊界與行高的上下邊界對齊。如果行高低於文字的高度也不要緊,元素的外邊界如上圖中的紅線。

行內元素的 baseline 就是文字所在的線。粗略的說,baseline 的位置就在文字高度的中間往下的某個位置,具體可以參照 w3c 的詳細定義。

從左到右依次為:擁有流內(in-flow)內容(乙個「c」)的行內塊元素,乙個擁有流內內容但是設定了 overflow:hidden 的行內塊元素,以及乙個擁有脫離了文件流的內容的行內塊元素。元素的 margin 邊界由紅線表示,border 為黃色,padding 為綠色,內容為藍色。每個行內塊元素的 baseline 由藍色線表示。

行內塊元素的外邊界就是它的margin盒子(margin-box)的上下邊界。也就是上圖中的紅線標示的區域。

行內塊元素的 baseline的位置取決於它是否有流內內容(in-flow content):

上圖中,行盒子(line-box)的上邊界與該行中最上部的元素的上邊界對齊,下邊界與該行中最下部的元素的下邊界對齊。

行盒子的 baseline 是可變的,css2.1 並未定義行盒子的 baseline。實際上,baseline 的具體位置在計算方程式中是乙個自由引數,它的取值依照同時滿足 vertical-align 和最小化行高條件而定。

因為行盒子的 baseline 不可見,我們可以通過在行的開頭增加乙個字元來確定 baseline 的位置,正如上圖中的 x 一樣。如果這個字元沒有被指定任何的對齊方式,那麼它預設的對齊方式就是 baseline。

在 baseline 的周圍,行盒子有個叫做文字盒(text box)的區域。文字盒可以被簡單的看作為沒有任何對齊方式的行內元素。文字盒的高度與其父元素的字型大小一致。因此,文字盒僅僅包含行盒子中未被格式化的文字。在上圖中,綠線標識出來的區域就是文字盒的位置。因為文字盒與 baseline 相關聯,因此當 baseline 移動的時候文字盒也會跟著移動。

在 w3c 的文件中,文字盒也被叫做 strut

至此,我們已經了解了所有的基礎知識,總結一下:

更多詳細定義請參考 w3c。

回到前面提到的問題,之所以與文字始終錯開了一些,是因為在行盒子中,和文字預設都是與行盒子的 baseline 對齊,也就是說的下邊界將與 baseline 對齊,當然也就錯開了一些。這個問題的修改方式就是給加上 vertical-align:middle.

關於vertical align的種種

有些時候vertical align的渲染結果並不同我們想象的一樣。雖然現在已經有很多 css 屬性可以完美替代vertical align的渲染效果,但有些時候碰到還是很頭疼,所以最好還是搞清楚它。作用物件 inline inline block子元素。這個屬性失效的情況 作用物件是塊級元素 因為...

關於 vertical align 的一些理解

關於 vertical align,我們很容易想到,這不就是告訴我們元素在縱向上和什麼對齊的屬性嗎?而事實上,正是這種寬泛的說法導致了我們對其的理解存在許多不確定性。事實上,對齊 這兩個字其實牽涉到4個物件 即哪個物件的哪條線,與哪個物件的哪條線對齊?只有將這4者搞清楚,我們才能說是理解了這個屬性。...

vertical align 樣式理解

文章參考 適用於 行內元素和單元格 table cell 元素 個人理解應用範圍 1 和 文字混排,使用vertical align屬性來定位 2 在table標籤中的td種使用vertical align屬性來定位 可以使用display table cell,注意該標籤父div一定是displa...