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


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

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

但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器都会有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 交通频道 作文范文 今夜,年华漂泊,后会无期 旭日阳刚励志短片今生缘 借钱200字 假期趣事——吹气球作文450字 给聋哑朋友的一封信作文550字 关于男人:女人似水,男人如茶 雷锋作文:向雷锋叔叔学习 小学六年级作文750字:老爸吹牛 夸夸身边的同学作文300字 淄博中考满分作文(100字) 2010年江苏省初中语文优质课评比观摩活动参赛作品:散步(钱丽华) 我的情人观 當莪想沵哋溡糇 你是我今生唯一的奢望 蝶恋残花,逝葬末央 母爱,我成长中的一座桥 中秋见闻作文:月圆人孤独 安慰失去朋友的话 四季的味道作文 蒲松龄《聊斋》性描写多:强奸场景不避讳写实 醉秋作文400字 小区里的交响乐 如麻;5作文200字 医院创建文明单位工作总结 我是一颗星 2013大一新生自我介绍 学习集团公司领导讲话心得体会3篇 作文话题精选,作文话题精选 覆地残红作文1300字 幸福在我身边作文 食品安全主题班会设计方案 小学二年级作文200字:开车旅行A Trip by Car 2016简历的自荐信怎么写 大学周年庆典祝福 唤醒麻木的心灵作文700字 上半年工作总结ppt 根雕园一游作文900字 人啊,认识你自己 食品药物管理监督局质检工作总结 情人节情话最浪漫最感人的100句 ___人民法院刑事裁定书:撤销缓刑用 喜结良缘新婚祝福短信 2016年乡镇春节团拜会致辞 独孤求败和东方不败谁厉害东方不败的武器是什么 五彩缤纷的校园 我们的故事作文精选5片 我的同学何焯立 你可还记得我们一起许下的诺言吗? 《爸爸去哪儿》第六期经典语录 2016周末安全知识竞赛主持词

Copyright © 2016 phpStudy |