如何理解CSS屬性中的vertical-align

這篇文章主要講解了“如何理解CSS屬性中的vertical-align”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何理解CSS屬性中的vertical-align”吧！

一、前言
vertical-align對于初學者最常見的使用是在表格中了，尤其是使用dreamweaver的童學，常見的數top,middle,bottom了,其他的應該很少用到，但是vertical-align的屬性之多，所以情況也略顯復雜，下面先來看看百度及Google常見問題：
1.vertical-align的含義是什么？
2.vertical-align圖片和文字對齊兼容性問題？
3.vertical-align屬性值各瀏覽器兼容性？
4.vertical-align如何實現圖片的垂直居中？
5.vertical-aling如何實現input[type='checkbox'],input[type='radio']與文本對齊？
6.為什么我設置的vertical-align屬性不起作用？
7.line-height對vertical-align屬性的影響？
……

二、vertical-align屬性介紹
1.適用范圍：
vertical-align指定了內聯（inline/inline-block）元素或表格單元格（table-cell）元素的垂直對齊方式。

2.可取值：

value 行內元素(inline) 表格單元格中元素(table-cell)
baseline 元素基線與父元素的基線對齊。一些可替換元素，比如 textarea ， HTML標準沒有說明它的基線，使用此標簽是，各瀏覽器表現可能有差異 與同行單元格的基線對齊
sub 元素基線與父元素的下標基線對齊
super 元素基線與父元素的上標基線對齊
text-top 元素頂端與父元素字體的頂線對齊
text-bottom 元素底端與父元素字體的底線對齊
length 元素基線超過父元素的基線指定高度。可以取負值
percentage 同length,百分比相對于line-height
middle 元素中線與父元素的小寫字母的中線對齊 單元格垂直居中
top 元素及其后代的頂端與整行的頂端對齊(相對于整行)即元素的行內框的頂端與行框的頂端對齊 單元格的內邊距的上邊緣與行的頂端對齊
bottom 元素及其后代的底端與整行的底端對齊(相對于整行)即元素的行內框的底端與行框的底端對齊 單元格的內邊距的下邊緣與行的底端對齊
3.根據上面的描述我們先來了解幾個基本概念：

1)基線，頂線，中線，底線

:1->頂線
:2->基線
:3->底線
:4->中線
2)行高
相鄰文本行基線間的距離

3)行距
上一個文本行基線和下一文本行頂線之間的距離

4)行內框
行內框是瀏覽器渲染模型中的一個概念，無法顯示出來，但是它又確實存在，它的高度就是行高指定的高度。

5)行框(line box)
行框是指本行的一個虛擬的矩形框，也是瀏覽器渲染模式中的一個概念。行框高度等于本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框采用自己的對齊方式向基準對齊，最終計算行框的高度）。

6)內容區
內容區是指底線和頂線包裹的區域(行內元素display：inline可以通過background-color屬性顯示出來)，實際中不一定看得到，但確實存在。內容區的大小依據font-size的值和字數進行變化。

4.屬性各瀏覽器測試

1)對于行內元素
vertical-align屬性值的表現與父元素(div.parent)相關,與兄弟元素的表現無關

待整理…

2)對于單元格元素
對于表格單元格元素默認值如下：
td:左對齊+垂直居中
th:水平居中+垂直居中
垂直居中繼承：td/th繼承自tr繼承自tbody/thead

待整理…

三、常見應用：
待整理…

感謝各位的閱讀，以上就是“如何理解CSS屬性中的vertical-align”的內容了，經過本文的學習后，相信大家對如何理解CSS屬性中的vertical-align這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！