纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
<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(图片未知宽高)的更多相关文章
- 未知宽高图片水平垂直居中在div
<BODY> <div class="box"> <span class="car"></span> <i ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- table-cell实现未知宽高图片,文本水平垂直居中在div
<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- CSS(3)实现水平垂直居中效果
CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...
随机推荐
- 交换机的交换原理、mac学习机制和老化机制
1.交换机的交换原理: 1.交换机在mac地址表中查找数据帧中的目标mac地址,如果找到就讲该数据帧发送到相应的端口,如果找不到就广播. 2.如果交换机收到的报文中的源mac地址和目标mac地址一致的 ...
- JAVA 设计模式 桥接模式
用途 桥接模式 (Bridge) 将抽象部分与实现部分分离,使它们都可以独立的变化. 桥接模式是一种结构式模式. 结构
- ionic 使用sqlite
昨天被ionic和sqlite折腾一天,怎么也无法实现读取,后来才发现,原来是codova中的sqliteplugin版本问题. 问题:Database location or iosDatabase ...
- JavaScript语言精粹(读书笔记)
第一章 精华 1,JavaScript的函数(主要)基于词法作用域(lexical scoping)的顶级对象.强类型语言允许编译器在编译时检测错误,但弱类型很自由,无需建立复杂的类层次,不用做强制造 ...
- ORACLE的SPFILE与PFILE
ORACLE中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件,可以分为两种类型.它们是在数据库实例启动时候加载的,决定了数据库的物理结构.内存.数据库的限制及系统大量的默认值.数据库的各种 ...
- Reporting Service 告警"w WARN: Thread pool pressure. Using current thread for a work item"
如果Reporting Service偶尔出现不可访问或访问出错情况,这种情况一般没有做监控的话,很难捕捉到.出现这种问题,最好检查Reporting Service的日志文件. 今天早上就遇到这样一 ...
- mysql的DATE_FORMAT用法
DATE_FORMAT(date,format) date 参数是合法的日期.format 规定日期/时间的输出格式. mysql的DATE_FORMAT用法 %a 缩写星期名 %b 缩写月名 %c ...
- Mysql 安装-windows X64
1.首先下载mysql文件包 2.将下载到的mysql-5.6.24-x64.zip进行解压. 3.安装,直接下一步. 4.进入文件夹内复制my-default.ini文件,并重命名为my.ini 5 ...
- [Java入门笔记] 面向对象编程基础(一):类和对象
什么是面向对象编程? 我们先来看看几个概念: 面向过程程序设计 面向过程,是根据事情发展的步骤,按进行的顺序过程划分,面向过程其实是最为实际的一种思考方式,可以说面向过程是一种基础的方法,它考虑的是实 ...
- Windows Server 2012 虚拟化实战:域
在Windows Server系统中,一些服务必需要构建在域的环境中,这不仅是为了统一验证和资源共享,同时也是为了网络安全.为构建虚拟化测试,我们需要先搭建域环境.之前先来大概了解一下域. 在使用工作 ...