一段放松的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 | 继承父元素 |
1. 首先关于数值，见下面的示例：
2. 再者关于百分数值，百分值与数值，以我的眼光看去，代表了不同的思想，以及心态。前者代表着灵活，自由与开放，后者有严谨，精确，安稳之意。CSS中支持百分值的属性还不少，例如width/height,line-height,font-size,这里的vertical-align属性也是其一。提到百分值，必然牵扯到相对于那个属性（或值），例如宽度百分比都是相对于父块状元素的宽度值的，font-size的百分值是相对于向外的第一含有font-size属性的层的font-size大小而言的，而这里的vertical-align，有些不拘一格，是相对于此标签继承的line-height值决定的。例如，如下示例代码：
如果您现在使用的就是IE6或是IE7或是IE6/7内核的浏览器，同时相对这个bug有所见识
3. 最后关于其他属性，像是bottom，middle等，我是懒得说什么了，为何？可以看看下面这张兼容性表：
兼容性(vertical-align)| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Buggy | Buggy | Buggy | Buggy | Buggy | Buggy |
您可能想查找下面的文章:
文章分类 | ||||||||||