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


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 相关文章推荐
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
js严格模式总结(分享)
Aug 22 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
当海贼王变成JOJO风
2020/03/02 日漫
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JavaScript错误处理
2015/02/03 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
3.12植树节活动总结2014
2014/03/13 职场文书
安全承诺书格式
2014/05/21 职场文书
公务员年终个人总结
2015/02/12 职场文书
入党心得体会
2019/06/20 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python