<div class="demo"><a href="#"><img src="http://nec.netease.com/img/l/1.jpg" alt=""/></a></div>

<style>

/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:210px;height:150px;overflow:hidden;text-align:center;display:table;margin:50px;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;} /*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;} /*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);} </style>

纯CSS实现图片水平垂直居中于DIV(图片未知宽高)的更多相关文章

  1. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  2. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  3. table-cell实现未知宽高图片,文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  4. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  7. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  8. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  9. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

随机推荐

  1. Linux安全基础:vi的使用

    1.vi的三种模式(1)一般模式(2)编辑模式(3)指令模式 2.模式切换键入i/o/a进入编辑模式键入:/,或/进入指令模式按esc退回一般模式保存wq强制保存wq!退出q强制退出q! 3.一般模式 ...

  2. 春节快乐!推荐一个关于 SharePoint 和 BI 的视频,笑死我了

    在春节即将来临的日子里,我偶然看到了这个相见恨晚的视频:Attractive Business Intelligence 我几乎是从头笑到尾看完的,太有趣儿了!特别适合放假.过节的时候看.本来今天下午 ...

  3. 配置 Oracle 11g侦听器来使用SQL操作ST_Geometry(DLL路径问题)

    注:http://resources.arcgis.com/zh-cn/help/main/10.2/index.html#/na/00qn0000001p000000/ (ArcGIS 帮助库) 1 ...

  4. IOS开发基础知识--碎片43

    1:增加手势进行左划效果,针对视图并修改其中一个的坐标,菜单用隐藏跟显示 @property(strong,nonatomic)UISwipeGestureRecognizer *recognizer ...

  5. iOS 学习 - 23 加载本地 txt 文件, NSMutableParagraphStyle 段落格式,缩放动画,字体间距

    思路: 1.new 一个 Empty 后缀为 .txt 文件,内容随笔拷贝一段 2.用 NSString 接收本地文件,再用一个标题拼接字符串 3.创建一个 NSMutableParagraphSty ...

  6. 使用putty与SSHSecureShellClient登录远程服务器完成与本地Git项目的同步

    使用软件远程登录管理服务器 今天给大家介绍两款远程登录管理服务器的软件(Putty和SSHSecureShellClient),这两款也是我在工作中经常的软件. 使用 PuTTY 远程登录管理服务器 ...

  7. Reporting Services 错误案例一则

    遇到一个有意思的Reporting Services报表的案例,在2015-01-30号的凌晨20分左右的时候,有人发现Reporting Services的速度非常慢,而且最后有抛出异常,当时不知道 ...

  8. ActiveMQ 5 入门

    apache-activemq-5.13.2 ActiveMQ使用JAAS授权的配置方式 <plugins> <!– 使用login.config配置授权用户 --> < ...

  9. Linux From Scratch(从零开始构建Linux系统,简称LFS)- Version 7.7(一)

    一. 准备工作 1. 需要一个Linux宿主系统,例如早先版本的 LFS,Ubuntu/Fedora,SuSE 或者是在你的架构上可以运行的其它发行版 如果想实现Win7与Linux双系统,可参考我的 ...

  10. RS-232 vs. TTL Serial Communication(转载)

    RS-232串口一度像现在的USB接口一样,是PC的标准接口,用来连接打印机.Modem和其他一些外设.后来逐渐被USB接口所取代,现在PC上已经看不到它的身影了.开发调试时如果用到串口,一般都是用U ...