垂直居中问题解释整理
垂直居中曾经很热的话题,也转过网络一些好的解决方案:
?
?
?
这次整理一下,并补充解释一下原理
以下内容经过 ie6,7 ,firefox3.5 测试通过
1.定位居中
定位时 left,top百分比相对于包含块的宽度与高度,relative或static的包含块为block或者td的祖先结点absolute的包含块为position不是static的任何祖先结点。
?
标准浏览器用 display:table ,原理同传统的表格布局居中,ie 6,7利用定位来实现,注意
ie 6,7 定位时 top,left 的百分比属性表现并不完全相同,同firefox3.5表现也不相同,体现在父元素没有设置height属性时,三个浏览器布局差异:
postion 差异演示 @ googlecode ,ie6,7不相同
?
?
postion 差异演示2 @ googlecode ,ie6,7相同
?
?
postion 差异演示3 @ googlecode ,ie6,7相同
?
具体为:ie6 一直向上找到有 height 的祖先或者绝对定位祖先并必要时动态计算高度,ie7一直向上找到 overflow!=visible 的祖先或者有 height 的祖先或者绝对定位祖先并必要时动态计算高度,如果父亲没有height属性则firefox忽略百分比top。
则 国外高人 利用这点(差异演示3)实现了下列方法 :
定位居中 演示 @ googlecode
2. inline-block 居中
inline-block 是一个灰暗的领域,但是经过 css geeks 孜孜不倦的研究 ,利用 inline-block hack for ie 以及 vertical-align 属性,达到了各个浏览器上通用的居中效果。
inline-block 居中演示 @ googlecode
3.image 居中
曾经的 taobao ued 考题 ,其实taobao 给出的解法非常不好 ( font-size都用上了 ....),有兴趣可以看看前面转的文章,img 其实就是一个 display :inline-block 的元素,同 2 的思想,可以达到这个效果,其实就是 inline-block 居中的一个特例
image 居中演示 @ googlecode
?