css实现图片垂直居中(兼容IE6/IE7)
来源:互联网 发布:debian设置软件源 编辑:程序博客网 时间:2024/04/29 03:59
图片垂直居中兼容ie系列
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">*{ padding:0; margin:0;}/*1.样式 */.box-1{ display:table;}.img-wrap-1{ display:table-cell; width:200px; height:200px; border:1px solid #ccc; text-align:center; *font-size:178px; zoom:1; vertical-align:middle;}/* height与font-size之比大约为:1:0.893; zoom:1是为了触发IE的hasLayout *//*2.样式 */.img-wrap-2{ display:inline-block; width:200px; height:200px; line-height:200px; border:1px solid #ccc; text-align:center;}.img-wrap-2 img{ vertical-align:middle;}/*3.样式 */.box-3{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;}.img-wrap-3 button{ width:100%; height:100%; border:0; background:none;}.img-wrap-3 img{ cursor:pointer;}/*4.样式 */.box-4{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;}.blank{ width:0px; height:100%; vertical-align:middle;}</style></head><body><!--图片垂直居中(兼容各主流浏览器,含IE6/IE7)1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome优点:不添加任何多余标签,兼容主流浏览器--><!--html结构--><div class="box-1"><a class="img-wrap-1" href="#"><img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" /></a></div><!--2.利用line-height实现居中兼容IE7+/FF/Chrome优点:不需要任何hack,兼容IE7+主流浏览器缺点:此方法不兼容IE6,当然也可以用方法1中的font-size来兼容IE6--><!--html结构--><div class="box-2"><a class="img-wrap-2" href="#"><img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" /></a></div><!--3.利用button标签实现居中兼容IE6+/FF/Chrome优点:不需要任何hack,兼容IE6+主流浏览器缺点:添加了多余的标签button--><!--html结构--><div class="box-3"><a class="img-wrap-3" href="http://baidu.com/" target="_blank"><button disabled="disabled"><img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" /></button></a></div><!--4.利用1px小图片实现垂直居中兼容IE6+/FF/Chrome优点:不需要任何hack,兼容IE6+主流浏览器缺点:添加了多余的标签img--><!--html结构--><div class="box-4"><img class="blank" src="images/blank.gif" alt="" /><a class="img-wrap-4" href="#" target="_blank"><img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" /></a></div></body></html>
优劣对比:
1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome
优点:不添加任何多余标签,兼容主流浏览器
缺点:需要计算处理font-size
2.利用line-height实现居中兼容IE7+/FF/Chrome
优点:不需要任何hack,兼容IE7+主流浏览器
缺点:此方法不兼容IE6,当然也可以用方法1中的font-size来兼容IE6
3.利用button标签实现居中兼容IE6+/FF/Chrome
优点:不需要任何hack,兼容IE6+主流浏览器
缺点:添加了多余的标签button
4.利用1px小图片实现垂直居中兼容IE6+/FF/Chrome
优点:不需要任何hack,兼容IE6+主流浏览器
缺点:添加了多余的标签img
0 0
- 【总结】怎样用css实现图片垂直居中(兼容IE6/IE7)
- css实现图片垂直居中(兼容IE6/IE7)
- CSS实现不定高度垂直居中 兼容IE7
- div+css实现Firefox和IE6兼容的垂直居中
- CSS 垂直布局 兼容IE6、IE7、FF
- 图片和文字在DIV中垂直居中显示(兼容IE6,IE7和FF)
- IE8中实现垂直居中(兼容IE6、IE7、IE8,Firefox,Chrome等)
- 纯css完美地解决图片在div内垂直水平居中,兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、
- 爱分享 css控制图片垂直水平居中支持IE6、IE7、IE8、FF等…
- 图片垂直水平居中 支持IE6、IE7、IE8、FF等
- CSS实现图片垂直居中
- div+css实现Firefox和IE6/7兼容的垂直居中
- css 让div垂直水平居中,兼容ie6+
- css实现垂直居中(兼容)
- 垂直居中解决方案,兼容ie6+
- 兼容IE6和IE8中div内图片垂直居中
- 兼容IE6 7 8 chrome firefox图片水平垂直居中
- 水平垂直居中图片及文字(兼容IE6+)
- 无废话WCF入门教程三[WCF的宿主]
- Android进程间通信(IPC)机制及Binder简要介绍
- gdb多进程调试
- NSArray和NSSet对比
- .net 消息队列MSMQ
- css实现图片垂直居中(兼容IE6/IE7)
- java 二叉树(七)获取左子树中的最大节点
- Problem4-总结报告
- 序列化与反序列化
- Install MongoDB and Node.js on a Raspberry Pi
- Eclipse集成反编译插件JadClipse
- 我们为什么选择Java
- CMD命令行接收用户输入信息
- 在windows7(64位)下安装python(3.4)的theano库