繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 经常用的图片在容器中的水平垂直居中实例
- Javascript
- 二级连动的另一个不错的实现方法
- 键盘元素的控制小方块的移动效果
- 如何丰富alt属性的显示效果
- 鼠标移动到某个单元格上后，整个列都变色的实现方法
- 用JavaScript实现字符串切分功能
- 通过JAVAScript实现页面自适应
- 短信提示使用 特效
- 一个多次搜索+多次传值的解决方案
- javascript读取RSS数据
- WEB泡泡堂2.0（图形界面+电脑对玩）(javascript)
- ＪＳ＋ＦＬＡＳＨ幻灯片播放图片脚本，整理了代码，使得调用更加方便！
- 利用javascript中的call实现继承
- javascript 中对象的继承〔转贴〕
- float ad浮动广告代码
- showModalDialog 和 showModelessDialog
- Ajax::prototype 源码解读
- 深入认识JavaScript中的函数
- Javascript技术技巧大全（五）
- 通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
- 用正则xmlHttp实现的偷(转)
Javascript 中的 经常用的图片在容器中的水平垂直居中实例
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 256 ::
收藏到网摘: n/a
这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题:“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。
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代码：
<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
评论 (0) All
