《
让图片居中兼容多种浏览器》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234TR013.htm
办法二和方法一的实现的原理大同小异，结构也是雷同的，方法一用的是前提解释，方法二就用的CSS Hack。
但是实际中实现的效果并不是很完善，因为各浏览器的解析都各不相同,让你的设计有重心和亮点，所以各浏览器都会有1px-3px的偏差。
<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell,让你的网站被K后 迅速起死回生;
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>
<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>
--> [
网站建设之]让图片居中兼容多种浏览器
方式三 (XHTML 1.0 strict)：
HTML结构部分：
Tag：阅读器 CSS 图片居中 浏览器 CSS 图片居中
该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就能够很便利的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。
本文教你让图片居中兼容多种浏览器，大部分情形下图片的宽度和高度是未知的，不一个固定的尺寸，在这个条件下要使图片在一个固定了宽度和高度的容器中垂直居中，是不是挺麻烦的，由于常常可能会用到这个计划，所以把一些常用的方法都收集收拾了一下。
下图是幻想中的后果图，外部容器的宽度和高度是固定的，旁边的图片宽度跟高度未知，然而图片要始终要相对外部的容器垂直居中。
CSS款式部门：
CSS样式部分：
<div id="box">
<span><img src="images/demo.jpg" alt=""></span>
</div>
<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]-->
标准浏览器仍是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是应用在img标签的前面插入一对空标签的措施。
方法三也同样实用XHTML 1.0 transitional。以上方法都是收集于网页教养网，临时只对这3个方法比较满足，兼容性方面不错，使用起来的限度也比拟小，还有些方法我也都逐一测试过，效果都不理想，在各浏览器中的差别比较大。另外司徒正美这里也收集了一些方法。
HTML构造局部：
思考：良多方法都是依附于将外部容器的显示模式设置成table才干实现垂直居中,让你的网站 心跳 起来，也就是div来模仿table，假如CSS有一个属性来实现这种效果那该多好。如果你也有好的方法，欢送你来分享。
<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3,让你永远受用的10个CSS简写技巧;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]-->
CSS样式部分：
方法二 (XHTML 1.0 transitional)：
该方法有个弊病，在尺度浏览器下因为外部容器#box的显示模式为display:table-cell，所以导致#box无奈应用margin属性，并且在IE8下设置边框也无效。
方法一 (XHTML 1.0 transitional)：
(责任编辑：网站建设)
让图片居中兼容多种浏览器相关文章