<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. [Android]Google 开源的 Android 排版库:FlexboxLayout

    最近Google开源了一个项目叫「FlexboxLayout」. 1.什么是 Flexbox 简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方 ...

  2. Objective-C 快速入门--基础(四)

    1.什么是Block? ① 块语法,本质上是匿名函数(没有名称的函数): ② Block是OC中的一种数据类型,在iOS开发中被广泛使用: ③ ^是Block的特有标记: ④ Block的实现代码包含 ...

  3. Android 手机卫士--md5加密过程

    在之前的文章中,我们将用户的密码使用SharedPreferences存储,我们打开/data/data/com.wuyudong.mobilesafe/shared_prefs文件夹下的 confi ...

  4. iOS之UICollectionView详解

    UICollectionView是一种类似于UITableView但又比UITableView功能更强大.更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UIColle ...

  5. Ruby的require相关知识

    1. 在调用require xxx之前,需要确定xxx这个gem已经安装过了(使用gem install xxx,安装位置可以使用gem env列出),或者xxx是Ruby内置的标准函数库(StdLi ...

  6. MS SQL Could not obtain information about Windows NT group/user 'domain\login', error code 0x5. [SQLSTATE 42000] (Error 15404)

    最近碰到一个有趣的错误:海外的一台数据库服务器上某些作业偶尔会报错,报错信息如下所示: -------------------------------------------------------- ...

  7. sql server: sql script

    select ProductGUID,ProductName,ProjectGUID from dbo.Product /* F637A079-E22B-4E50-87E9-000147B1B1F4 ...

  8. springMVC 配置CharacterEncodingFilter之后不起效果

    最近开始自学springMVC框架,遇到中文乱码这一经典问题,记录下解决过程,以便后续忘记 web.xml 里过滤器配置如下: <?xml version="1.0" enc ...

  9. 实战搭建SVN代码版本服务器

    前言:公司要求搭建一台SVN代码版本管理服务器,用于管理所有代码资产: 项目架构图 1.环境安装 [root@host_centos ~]#yum –y install subversion mod_ ...

  10. WPF Telerik TreeListView样式设计

    Telerik控件 TreeListView 修改其中样式 1.添加TreeListView控件 <telerik:RadTreeView x:Name="ObjecTreeView& ...