探討vertical-align應(yīng)用
與valign的對(duì)比
vertical-align在小雨手冊(cè)上的解釋是：設(shè)置或檢索對(duì)象內(nèi)容的垂直對(duì)其方式。我覺(jué)得不太理解的是vertical-align所在的分類是“屬性/文本”
O3noBLOG特別強(qiáng)調(diào)的是vertical-align和valign的不同，的確vertical-align應(yīng)用最多的應(yīng)該是在td內(nèi)，控制內(nèi)部對(duì)象位置，和td的valign屬性極其相似。
valign共有四個(gè)參數(shù)：top, baseline, bottom, middle，相對(duì)而言vertical-align也有相同的屬性值，以下是對(duì)td控制對(duì)比：
使用vertical-align:top;來(lái)避免td默認(rèn)的valign="middle"是很好的選擇，當(dāng)然也可以使用vertical-align:middle;來(lái)對(duì)td控制，但對(duì)div肯定也是無(wú)效的。
效果演示：http://www.rexsong.com/blog/attachments/20...1246_valign.htm
與align的對(duì)比
按照w3的提示，使用vertical-align使用在inline對(duì)象上，比如對(duì)img的控制，于是又和img的align屬性類似。
使用align="absmiddle"控制img絕對(duì)居中的時(shí)候，也可以嘗試使用vertical-align:middle;，做個(gè)對(duì)比看的更清楚：
所以真正的絕對(duì)居中還是align="absmiddle"，這是使用CSS不可替代的。
效果演示：http://www.rexsong.com/blog/attachments/20...41444_align.htm
inline應(yīng)用
用來(lái)決定inline對(duì)象的垂直位置，看兩個(gè)例子：
小圖：http://www.rexsong.com/blog/attachments/20...ignmenttest.htm
大圖：http://www.rexsong.com/blog/attachments/20...rticalalign.htm
相關(guān)文章
針對(duì)瀏覽器隱藏CSS...2006-09-09
CSS3使用過(guò)度動(dòng)畫和緩動(dòng)效果案例講解
這篇文章主要介紹了CSS3使用過(guò)度動(dòng)畫和緩動(dòng)效果案例講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
網(wǎng)頁(yè)美工制作規(guī)范...2006-08-08
在css中類選擇器就是在類名前面加一個(gè)點(diǎn)號(hào)了，如果是多類不是打多個(gè)點(diǎn)號(hào)而以.important.urgent這種形式了，下面我來(lái)給大家介紹一下CSS 類選擇器與多類選擇器的用法2013-11-11
典型的三行二列居中高度自適應(yīng)布局...2006-08-08
用!important解決IE和Mozilla的布局差別...2006-08-08
網(wǎng)頁(yè)設(shè)計(jì)中色彩搭配的內(nèi)涵
網(wǎng)頁(yè)設(shè)計(jì)中色彩搭配的內(nèi)涵...2006-09-09
對(duì)display:inline;與float:left;的認(rèn)識(shí)
對(duì)display:inline;與float:left;的認(rèn)識(shí)...2006-09-09
5個(gè)HTML5的常用本地存儲(chǔ)方式詳解與介紹
在HTML5規(guī)范之前，存儲(chǔ)主要是用cookies，但cookies缺點(diǎn)有在請(qǐng)求頭上帶著數(shù)據(jù)，大小是4k之內(nèi)，今天為大家介紹一下H5的5種存儲(chǔ)方式2020-02-02
無(wú)邊框表格...2006-07-07