Div图片垂直居中的方法 - 兼容各种浏览器

更新时间:2009-9-24 9:18:38 编辑:阿帆

Div布局很简单,方便,但是就垂直居中这个问题来讲,它还是有无法弥补的缺陷的,实现起来比较麻烦,需要兼容各种浏览器,下面介绍下解决方法及实例展示:

以下是样式：
<style>
.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

/*设置水平居中*/
text-align:center;

        /* 针对IE的Hack */
        *display: block;
        *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
        *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

        width:200px;
        height:200px;
        border: 1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}
</style>

强调：这种方法只能适用于不用float属性的div.

原载: No.1网络工作室 http://www.noonenet.cn/
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。

Tags:Div 图片垂直居中兼容浏览器
同类文章：
· 解决图片固定底部在IE6里的BUG
· WEB标准最佳实践：五个需要注意的地方
· Css的z-index属性与Flash动画层叠需注意
· div+css 垂直导航栏并添加翻转效果
· 给链接定义样式