本篇內(nèi)容主要講解“CSS的vertical-align怎么寫”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS的vertical-align怎么寫”吧!

創(chuàng)新互聯(lián)建站一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、成都網(wǎng)頁(yè)設(shè)計(jì)、微信小程序開(kāi)發(fā)、成都網(wǎng)站開(kāi)發(fā)、成都網(wǎng)站制作、成都軟件開(kāi)發(fā)、手機(jī)APP定制開(kāi)發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來(lái)見(jiàn)證！

寫vertical-align樣式的時(shí)候自動(dòng)匹配出一長(zhǎng)串的屬性值，看得我眼花繚亂，怎么有那么多屬性值？該用哪個(gè)？為什么這個(gè)屬性值和另外一個(gè)屬性值的表現(xiàn)形式是一樣的？細(xì)數(shù)一下vertical-align的屬性值，代碼請(qǐng)參考code1-1，表現(xiàn)形式請(qǐng)參考image1-1。

code1-1

編譯結(jié)果如下圖：

1. vertical-align:middle; // middle指元素的中點(diǎn)在基線加上父元素x字母的一半

圖片高度32px，中點(diǎn)即16px，字母x的高度為8px，一半即4px，middle指元素的中點(diǎn)在基線加上父元素x字母的一半，8px/2-32px/2=-12px。

code2-1

編譯結(jié)果如下圖：

2. vertical-align:50%; // percentage values的參考系

圖片大小是32px*32px[當(dāng)前圖片是300px*300px，已統(tǒng)一樣式img{width:32px;}]，字體大小是chrome默認(rèn)的字體大小16px。只顯示文本的時(shí)候行高是22px。

默認(rèn)情況下給圖片設(shè)置vertical-align:50%，既然是百分比，那么就一定有參考系，究竟是以誰(shuí)為參考系，有三種假設(shè)：

假設(shè)一，如果以圖片的高度為參考系，圖片向上偏移32px*50% = 16px；

假設(shè)二，如果以font-size為參考系，圖片向上偏移16px*50% = 8px；

假設(shè)三，如果以行高line-height為參考系，圖片向上偏移22px*50% = 11px；

不賣關(guān)子了，當(dāng)vertical-align設(shè)置成百分比時(shí)，它的參考系是line-height，所以我后面列出兩個(gè)設(shè)置了line-height的行內(nèi)元素來(lái)做比較。

code2-2

編譯結(jié)果如下圖：

3. vertical-align:top;和vertical-align:text-top;比較，同理bottom和text-bottom也是如此

從設(shè)置了line-height:10px;的兩個(gè)例子就可以明顯看出來(lái)top是與父級(jí)盒模型的上邊緣對(duì)齊重合的，而text-top是與父級(jí)元素內(nèi)容的上邊緣對(duì)齊重合的。

code2-3-1

編譯結(jié)果如下圖：

code2-3-2

編譯結(jié)果如下圖：

4. 水平位置

vertical-align:top;

vertical-align:middle;

vertical-align:baseline;

vertical-align:bottom;

水平位置從上到下的屬性值依次是：top/middle/baseline/bottom

這句話的意思是說(shuō)，將top/middle/baseline/bottom看成一條水平線，設(shè)置vertical-align的元素去對(duì)齊這根水平線，從下圖可以看出來(lái)這根水平線的位置從上到下依次是top/middle/baseline/bottom 。

code2-4-1

編譯結(jié)果如下圖：

這一篇主要介紹vertical-align的屬性，以下為完整源碼，建議大家自行在瀏覽器操作一遍，查看編譯結(jié)果加深理解。

到此，相信大家對(duì)“CSS的vertical-align怎么寫”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享名稱：CSS的vertical-align怎么寫
URL分享：http://chinadenli.net/article30/gidepo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、網(wǎng)站策劃、網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)