<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. SharePoint 2013 Search 配置总结

    前言:SharePoint 2013集成了Fast搜索以后,搜索的配置有了些许改变,自己在配置过程中,也记录下了一些入门的东西,希望能够对大家有所帮助. 1.配置搜索服务,首先需要启用搜索功能,基本思 ...

  2. 敏捷开发与jira之研发管理模式

    以IPD方法论为基础,采用原型+迭代的开发模式,并以质量优先为原则,持续对用户做价值交付. 使用JIRA+WIKI+SVN管理整个的研发过程:JIRA管理任务和进度:SVN管理代码和过程文档:WIKI ...

  3. SqlServer--用代码创建和删除数据库或表

    创建数据库,创建表,设置主键数据库的分离和附加MS SQLServer的每个数据库包含:1个主数据文件(.mdf)必须.1个事务日志文件(.ldf)必须.可以包含:任意多个次要数据文件(.ndf)多个 ...

  4. BOOST.Asio——Tutorial

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  啥说的,鄙视那些无视版权随 ...

  5. mysql-Federated存储方式,远程表,相当于sql server的linked server

    MySQL中针对不同的功能需求提供了不同的存储引擎.所谓的存储引擎也就是MySQL下特定接口的具体实现. FEDERATED是其中一个专门针对远程数据库的实现.一般情况下在本地数据库中建表会在数据库目 ...

  6. WPF 自定义ListBox

     如题,要实现一个如下的列表,该如何实现? 在设计过程中,会遇到如下问题: 1.ListBox中ListBoxItem的模板设计 2.ListBox中ListBoxItem的模板容器设计 3.List ...

  7. mysql下存储文件问题

    ibdata1 & mysql-bin 问题:磁盘空间报警,经查发现ibdata1和mysql-bin日志占用空间太多(其中ibdata1超过120G,mysql-bin超过80G) 原因:i ...

  8. Java关键字 ClassName.this(类名.this)的理解

    关键字this用于指代当前的对象.因此,类内部可以使用this作为前缀引用实例成员: this()代表了调用另一个构造函数,至于调用哪个构造函数根据参数表确定.this()调用只 能出现在构造函数的第 ...

  9. 洛谷P3406 海底高铁[差分 贪心]

    题目背景 大东亚海底隧道连接着厦门.新北.博艾.那霸.鹿儿岛等城市,横穿东海,耗资1000亿博艾元,历时15年,于公元2058年建成.凭借该隧道,从厦门可以乘坐火车直达台湾.博艾和日本,全程只需要4个 ...

  10. 深入浅出SQL笔记1–数据和表

    1.数据库的概念及组成 数据库是保存表和其他相关SQL结构的容器. 数据库是由各种各样的表构成的,一个数据库里面的表总是存在相互联系的关系. 数据库内的信息组成了表,表示由行和列构成的,行是一组能够描 ...