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

成都創(chuàng)新互聯(lián)為企業(yè)級(jí)客戶提高一站式互聯(lián)網(wǎng)+設(shè)計(jì)服務(wù)，主要包括成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、App定制開發(fā)、小程序定制開發(fā)、宣傳片制作、LOGO設(shè)計(jì)等，幫助客戶快速提升營(yíng)銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn)，可以確保每一個(gè)作品的質(zhì)量和創(chuàng)作周期，同時(shí)每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。 

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

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

2.可取值：

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

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

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

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

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

5)行框(line box)
行框是指本行的一個(gè)虛擬的矩形框，也是瀏覽器渲染模式中的一個(gè)概念。行框高度等于本行內(nèi)所有元素中行內(nèi)框較大的值（以行高值較大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度）。

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

4.屬性各瀏覽器測(cè)試

1)對(duì)于行內(nèi)元素
vertical-align屬性值的表現(xiàn)與父元素(div.parent)相關(guān),與兄弟元素的表現(xiàn)無關(guān)

待整理…

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

待整理…

三、常見應(yīng)用：
待整理…

感謝各位的閱讀，以上就是“如何理解CSS屬性中的vertical-align”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何理解CSS屬性中的vertical-align這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

文章題目：如何理解CSS屬性中的vertical-align-創(chuàng)新互聯(lián)
新聞來源：http://www.rwnh.cn/article6/djgdig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、云服務(wù)器、靜態(tài)網(wǎng)站、網(wǎng)站營(yíng)銷、企業(yè)建站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)