相关文章
初学进阶:上网实用小技巧六招
网站策划先来这10步
北京网页设计用Dreamweaver制作网页中关于空格的探讨
企通互联让浏览者记住你的主页
网站制作网页技巧：妥善处理JavaScript中的错误
网页设计网页设计技巧：跨浏览器的CSS固定定位
网站建设Foxmail爬上网，做在线邮箱
网站制作在页面上实现Google PR值的显示
网站建设超级漂亮的表格:彩色背景
北京网站设计网页框架和网页框架集如何工作
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> www.qitongnet.com北京网站建设图片在已知大小容器中的水平垂直居中实例
www.qitongnet.com北京网站建设图片在已知大小容器中的水平垂直居中实例
这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题:“Centering an image of unknown size in an outer container of known size”。
这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape 北京网站设计，为IE和非 企通互联IE分别写了二套简单的样式。
IE使用inline-blocks，非IE使用table-cell and vertical-align。 Www@Chinaz@com
CSS代码： 中国站.长站
/* for non-IE browsers */ 网站制作
div.holder {width:750px; height:300px; background:#f8f8f8; 网站设计
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;} 网站制作
} 网站建设
北京网站建设<!--[if IE]> 企通互联
<style type="text/css"> 网页设计
/* vertical align for IE */ 北京网页设计
网页设计 #edge {width:0; height:100%; display:inline-block; vertical-align:middle;} 北京网站制作
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;} 北京网站制作
</style> 网页设计
网站设计 <![endif]--> 中.国站长站
xhtml代码： www.qitongnet.com Chinaz
<div class="holder"> 北京网站设计
<span id="edge"></span> 北京网站建设
北京网站制作<span id="container"><img src="graphics/homework.jpg" alt="" /></span> 北京网站建设
</div>
中.国站长站
作者的例子是单个的，我扩展了下，一页6张图片，可适用于像册和产品展示等地方，查看演示
form:http://www.cssplay.co.uk/menu/centered.html Chinaz.com