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