WIXOO

Digest

CSS图片垂直居中方法整理集合

作者:蓝色理想 发布时间 10/11/19 来源 蓝色理想

看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接:IE6下用writing-mode实现 未知高度替换元素垂直居中。
 


 提示:您可以先修改部分代码再运行

/*lesliezmz 粘贴结束 */

/*yoom 粘贴开始 2010-01-18*/
因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法是:
 


 提示:您可以先修改部分代码再运行

如果不喜欢条件注释,可自行将代码以css hack的方式拼凑起来。
原帖链接:未知高宽的图片垂直局中
/*yoom 粘贴结束*/
 


 提示:您可以先修改部分代码再运行

标准浏览器下另类方法:
 


 提示:您可以先修改部分代码再运行

标准浏览器严格型申明下:
 


 提示:您可以先修改部分代码再运行

利用字体大小的方法:CSS图片垂直居中方法整理集合
 


 提示:您可以先修改部分代码再运行

display:inline-block 方法
 


 提示:您可以先修改部分代码再运行

最简单当然是背景图片的方法拉。CSS图片垂直居中方法整理集合
 


 提示:您可以先修改部分代码再运行