大连网站制作客服
主营业务
  • 网站制作
  • 网站维护
  • 网站推广
  • 域名空间
联系电话
联系人:尹先生
QQ:1050706570
E-mail:biz@noonenet.cn
地址:大连市甘井子区哲林北园29号
·首页 >> 设计表现 >> Div图片垂直居中的方法 - 兼容各种浏览器

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>

<div class="box"><a href=http://www.noonenet.cn target="_blank"><img src="http://www.noonenet.cn/images/logo.gif" border="0"/></a></div>

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

 

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


Tags:Div 图片垂直居中 兼容 浏览器
同类文章:
· 解决图片固定底部在IE6里的BUG
· WEB标准最佳实践:五个需要注意的地方
· Css的z-index属性与Flash动画层叠需注意
· div+css 垂直导航栏并添加翻转效果
· 给链接定义样式
返回新闻列表
top
本站关键字:大连网站制作 - 大连网站建设 - 大连网页制作
CopyRight © 2009-2012 No.1网络工作室 All Rights Reserved  sitemap
地址:大连市甘井子区哲林北园29号 电话:13889684613 E-mail:biz@noonenet.cn QQ:1050706570
logo