一段放松的YY后，進(jìn)入正題。上個(gè)月21號(hào)，有位同行留言想讓我講講vertical-align屬性，我其實(shí)對(duì)vertical-align屬性也是略知皮毛，要說(shuō)豈敢談“講解”，就說(shuō)說(shuō)我對(duì)vertical-align屬性的一些理解吧，純屬個(gè)人見(jiàn)解，若有不準(zhǔn)確之處還望見(jiàn)諒。還有，vertical-align屬性牽扯到的知識(shí)實(shí)在是太多了，不是一篇文章就可以講清楚的，這里我就只挑幾個(gè)典型或是重要的地方說(shuō)一說(shuō)。
在開(kāi)始之前，希望對(duì)下面的知識(shí)有所了解，inline box模型，inline/inline-block/block屬性。//zxx:關(guān)于inline box模型，我在“浮動(dòng)的’破壞性’”部分做了專(zhuān)門(mén)的介紹。
二、vertical-align一大堆亂七八糟的屬性
vertical-align指的是什么意思呢？我window+D清屏，雙擊打開(kāi)有道桌面詞典，輸入vertical，再輸入align，“哦~~~~”，我腦袋一晃，原來(lái)是“垂直的”+“對(duì)齊”的意思，就是垂直對(duì)齊嘛！
中，就是垂直對(duì)齊的意思，先放一邊，我看先看看vertical-align支持哪些屬性，我比較喜歡輕巧的Dreamweaver，看看他的提示屬性又哪些：
有句俗語(yǔ)叫做“見(jiàn)多不怪”，我估摸著這些top,bottom屬性大家都見(jiàn)過(guò)，沒(méi)啥看頭，沒(méi)啥說(shuō)頭。老實(shí)講，我看到這些養(yǎng)臭蟲(chóng)的屬性也頭疼，所以，忘了他們，我們說(shuō)點(diǎn)有意思的。vertical-align屬性與數(shù)值。見(jiàn)下面的表：
| 值 | 描述 |
|---|---|
| 數(shù)值 | 上下的高度值，支持負(fù)值 |
| 百分值 – % | 上下的高度值，百分大小相對(duì)于”line-height”屬性 |
| baseline | 默認(rèn)。元素放置在父元素的基線上。 |
| sub | 下標(biāo)對(duì)齊 |
| super | 上標(biāo)對(duì)齊 |
| top | 把元素的頂端與行中最高元素的頂端對(duì)齊 |
| text-top | 把元素的頂端與父元素字體的頂端對(duì)齊 |
| middle | 父元素中線對(duì)齊 |
| bottom | 把元素的頂端與行中最低的元素的頂端對(duì)齊。 |
| text-bottom | 父元素文字底部對(duì)齊 |
| inherit | 繼承父元素 |
1. 首先關(guān)于數(shù)值，見(jiàn)下面的示例：
新聞熱點(diǎn)
疑難解答
圖片精選
