经常用的图片在容器中的水平垂直居中实例


Posted in Javascript onJune 10, 2007

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“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

Javascript 相关文章推荐
Jquery 表格合并的问题分享
Sep 17 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue实现百度搜索功能
Dec 28 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
form中限制文本字节数js代码
Jun 10 #Javascript
jQuery 中关于CSS操作部分使用说明
Jun 10 #Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 #Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 #Javascript
用CSS+JS实现的进度条效果效果
Jun 05 #Javascript
js实现DIV的一些简单控制
Jun 04 #Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 #Javascript
You might like
PHP文件上传原理简单分析
2011/05/29 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
arguments对象
2006/11/20 Javascript
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python使用RNN实现文本分类
2018/05/24 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
个人借款担保书
2014/04/02 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
2014年后勤工作总结
2014/11/18 职场文书
雨花台导游词
2015/02/06 职场文书
幼师中班个人总结
2015/02/12 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL