一段放松的YY后,進入正題。上個月21號,有位同行留言想讓我講講vertical-align屬性,我其實對vertical-align屬性也是略知皮毛,要說豈敢談“講解”,就說說我對vertical-align屬性的一些理解吧,純屬個人見解,若有不準確之處還望見諒。還有,vertical-align屬性牽扯到的知識實在是太多了,不是一篇文章就可以講清楚的,這里我就只挑幾個典型或是重要的地方說一說。
在開始之前,希望對下面的知識有所了解,inline box模型,inline/inline-block/block屬性。//zxx:關于inline box模型,我在“浮動的’破壞性’”部分做了專門的介紹。
二、vertical-align一大堆亂七八糟的屬性
vertical-align指的是什么意思呢?我window+D清屏,雙擊打開有道桌面詞典,輸入vertical,再輸入align,“哦~~~~”,我腦袋一晃,原來是“垂直的”+“對齊”的意思,就是垂直對齊嘛!
中,就是垂直對齊的意思,先放一邊,我看先看看vertical-align支持哪些屬性,我比較喜歡輕巧的Dreamweaver,看看他的提示屬性又哪些:

有句俗語叫做“見多不怪”,我估摸著這些top,bottom屬性大家都見過,沒啥看頭,沒啥說頭。老實講,我看到這些養臭蟲的屬性也頭疼,所以,忘了他們,我們說點有意思的。vertical-align屬性與數值。見下面的表:
| 值 | 描述 |
|---|---|
| 數值 | 上下的高度值,支持負值 |
| 百分值 – % | 上下的高度值,百分大小相對于”line-height”屬性 |
| baseline | 默認。元素放置在父元素的基線上。 |
| sub | 下標對齊 |
| super | 上標對齊 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| text-top | 把元素的頂端與父元素字體的頂端對齊 |
| middle | 父元素中線對齊 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊。 |
| text-bottom | 父元素文字底部對齊 |
| inherit | 繼承父元素 |
新聞熱點
疑難解答