CSSASSCSSASS

之前也有搜集过网络上一些纯CSS的几种方法。

下文与以上并无关系。
先说一些（未知尺寸元素）垂直居中的思路：
1. 我们一般会设置height=line-height来使一行内文字(及inline元素)可以垂直居中，那能不能推而广之呢？遗憾，单纯设置外层height=line-height使image等可置换元素垂直居中，在ie6下是行不通的。见小结line-height和vertical-align, image等可置换元素尚且不行，更别提div等块级元素了。
2. 利用display的一个属性：table-cell。其实这个方法用来支持垂直居中，那是舍我其谁啊，可惜的是ie8以下的浏览器并不支持display:table-cell;
我们可以看一下：

我们发现以上代码在ie6，ie7之下并不能完成我们的要求。
这就是为什么本文开头收集的那些方法要极尽怪异之写法，而想要达到全兼容之目的了。

下面，在我们的新方法中，我们得引入一个空标签。

这种方法在http://www.deviantart.com/网站上很早就应用了。不过，人家针对firefox,opera等支持table-cell的浏览器使用display:table-cell;
而只对ie6,7这两个异类使用了空标签来达到效果。

上面代码的注释里我提到了span嵌套div的不规范问题，可以这样修改：

对于上面的display:inline-block稍微解释一下：
ie6,7对display:inline-block其实支持并不完善的。（这也不稀奇，firefox2是完全不支持）
在ie6,7下的inline元素设置display:inline-block能够达到效果，但对于block元素却无能为力。
所以使用了*display:inline;zoom:1来达到display:inline-block的效果。这也是haslayout的“功劳”。

–补充：2011-3-4–
如果文字超过块的宽度，我们发现在ie8下则不能垂直居中了。然而我们知道ie8是支持table-cell的。
所以结合两个方法——结合后的方法是一个比较完美的方法：

标签： inline-block, table-cell, vertical-align, 垂直居中, 居中

这篇文章发布于 2008年10月6号，星期一，11:11，归类于 CSS2。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。