關於vertical align的種種

有些時候vertical-align的渲染結果並不同我們想象的一樣。

雖然現在已經有很多 css 屬性可以完美替代vertical-align的渲染效果，但有些時候碰到還是很頭疼，所以最好還是搞清楚它。

這個屬性失效的情況：

作用物件是塊級元素（因為塊級元素會霸佔整行）；

作用元素設定了浮動、定位等脫離文字流的屬性（父元素設定這些屬性不影響）；

父元素是flex或grid布局（作用元素設定這些布局不影響）。

屬性值：值

描述baseline(default) 元素的基線與父元素的基線對齊。

top把對齊的子元素的頂端與line box頂端對齊。

text-top把元素的頂端與父元素內容區域的頂端對齊(文字頂端)。

middle元素的中垂點與父元素的基線加1/2父元素中字母的高度對齊。

bottom把對齊的子元素的底端與 line box底端對齊。

text-bottom把元素的底端與父元素內容區域的底端對齊。

sub垂直對齊文字的下標。

super垂直對齊文字的上標。

inherit採用父元素相關屬性的相同的指定值。

長度通過距離公升高或降低元素。

%通過相對於line-height屬性的百分值公升高或降低元素。0值等同於baseline。

看**的描述太抽象，還不如來點兒實際的～

html **：

class

="container"
>
father text
class
="content"
>
child text
span
>
class
="align"
src="./img/xx.png"
alt="vertical align image"
>
src=
"./img/**.png"
alt="reference image"
>
div>
baseline
：元素放在父元素的基線上。
實際上文字子元素是文字內容放在父元素基線上。因為這是預設值，其他子元素都是baseline。
top：元素的頂端與行中最高元素的頂端對齊。
.align

text-top：元素的頂端與父元素字型的頂端對齊。

middle：元素在父元素內垂直居中。

可以看出，middle實際是指元素中部與父元素文字中部對齊。

bottom：元素底端與行中最低元素底端對齊。

從baseline可以看出這裡最低元素是 content 元素。

text-bottom：元素底端與父元素文字底端對齊。

！這和baseline是不一樣的。

長度值：使用定長表示元素底部與父元素基線的距離。

正值公升高元素，負值降低元素。0值等同於baseline。

百分比：元素底部相對于父元素基線移動相對於元素行高line-height的百分比。

這裡百分比是相對於元素的line-height值。

.align

假設.align本身未設定行高，繼承的行高是20px，這裡的-10%代表的實際值是-10% × 20 = -2px，所以是讓元素下降 2 畫素。

設定.align行高為100px，這裡的-10%代表的實際值是-10% × 100 = -10px，所以是讓元素下降 10 畫素。

！ie6 / 7 下的vertical-align百分比值不支援小數的line-height。

關於 vertical align 的一些理解

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

關於 vertical align 的一些小知識

在日常開發過程中，我們經常會遇到如下的場景，一行中既有也有文字，而且還要和文字對齊。效果如下 通常 如下 some text.得到的效果卻是這樣的 修改下文字為行內塊盒子，並設定行高與盒子高度 盒子高度與高度相同 一致，效果如下 我們發現文字區域始終與錯開了一些。怎麼解決呢？設定文字的 margin...

vertical align 樣式理解

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