网页制作实例:图片真正居中的方法


图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。

下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。

但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器都会有1px-3px的偏差。

方法一 (XHTML 1.0 transitional):

该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。

HTML结构部分:

<div id="box">
    <span><img src="images/demo.jpg" alt=""></span>
</div>

CSS样式部分:

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional):

方法二和方法一的实现的原理大同小异,结构也是相同的,方法一用的是条件注释,方法二就用的CSS Hack。

CSS样式部分:

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*针对IE6/7的Hack*/
top:50%; /*针对IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*针对IE6/7的Hack*/
top:-50%;left:-50%; /*针对IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

该方法有个弊端,在标准浏览器下由于外部容器#box的显示模式为display:table-cell,所以导致#box无法使用margin属性,并且在IE8下设置边框也无效。

方法三 (XHTML 1.0 strict):

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法。

HTML结构部分:

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS样式部分:

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
#box img {
    vertical-align:middle
    }
</style>
<![endif]-->

方法三也同样适用XHTML 1.0 transitional。以上方法都是收集于网页教学网,暂时只对这3个方法比较满意,兼容性方面不错,使用起来的限制也比较小,还有些方法我也都一一测试过,效果都不理想,在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。

思考:很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中,也就是div来模拟table,如果CSS有一个属性来实现这种效果那该多好。如果你也有好的方法,欢迎你来分享。

原文:http://stylechen.com/img-middle.html



相关阅读:
checkbox 复选框不能为空
关于ASP.NET在IIS一些问题经验总结
asp.net(c#)ref,out ,params的区别
双系统计算机怎样卸载其中一个?
Oracle10g新特性——正则表达式
ASP在线创建Word与Excel文档
JavaScript判断窗口是否最小化的代码(跨浏览器)
mssql 两种数据插入方式
php学习 字符串课件
在64位Linux环境下安装Oracle数据库10g
脱离Linux新手十要点
AJAX、AJAX实例及AJAX源代码
Windows XP实现开机自动拨号上网
SQL Server存储过程命名标准
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 寥寥花开簌簌雪 春雨的启迪 我叫李紫(2)作文200字 《慧骃国游记》教案 爱情道歉短信 急躁的我 为什么不可以一笑而过 关于青春的作文:变了味的青春 水龙吟(上巳) 非主流毕业赠言 小学五年级作文500字:故乡的水 梦幻谷一游作文600字 守护甜心国作文700字 【精品】班组半年工作总结 缤纷的乐章作文500字 画泥画 忍了,痛了,伤了 小学五年级作文500字:再见了,同学 大雪无情人有情作文600字 看后想流泪的疼到骨子里的伤感语录 [图文]建队节,戴红领巾 流魂的另一个空间 笔迷永远只跟着笔畅走 菊,我的生命之花 2015高校教师守纪律讲规矩心得体会 小学四年级写元宵节的作文:最喜欢的元宵节 一页作文100字 钟基伟(讽刺小小说) 成长足迹作文550字 限时人心 究竟应该如何认识中国的农业、农村、农民问题 粮食综合处科学发展观的演讲稿 小学五年级作文750字:生如夏花 朱自清《匆匆》读后感400字 礼貌 2014有关经济纠纷上诉状样本 市贸促会突出“四个创新” 提升服务功能(总结交流) 爱情,不过是满地鸡毛蒜皮而已 有花,有你作文900字 快乐的国庆节500字:欢度国庆节 夜の泪作文100字 校园的美景 基于MapInfo的水文信息管理系统 残疾人工作者党员演讲稿 下课十分钟200字 每个孩子都是一座宝藏 市政研室卫计局开展医养结合模式调研汇报 感恩节日记 在街道保持共产党员先进性教育活动动会上的讲话 我珍藏的一张照片作文400字

Copyright © 2016 phpStudy |