纯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 ...
随机推荐
- SharePoint Framework:下一代开发方式
SharePoint Framework(SPFx),是页面 和Webpart的模型,完全支持本地开发(即完全可以脱离SharPoint环境在本地进行开发),听起来是不是很高级呢,早期SharePoi ...
- Android Touch事件传递机制 二:单纯的(伪生命周期)
转载于:http://blog.csdn.net/yuanzeyao/article/details/38025165 在前一篇文章中,我主要讲解了Android源码中的Touch事件的传递过程,现在 ...
- [Android]对MVC和MVP的总结
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5036289.html 经历过的客户端的架构分为这么几个阶段: ...
- nodejs的child_process同步异步
nodejs是一种单线程模型,但是,使用nodejs的child_process模块可以实现多进程任务.利用child_process可以创建子进程,实现子进程和主进程之间的通信. nodejs v0 ...
- iOS开发之Runtime机制深入解析
本篇主要讲述在 OC 开发中主要涉及到的运行时机制: 运行时的工作: 运行时在 OC 中的工作:OC 语言的设计模式决定了尽可能的把程序从编译和链接时推迟到运行时.只要有可能,OC 总是使用动态的方式 ...
- JavaScript的个人学习随手记(二)
JS HTML DOM 改变 HTML 输出流 JavaScript 能够创建动态的 HTML 内容: 今天的日期是: Sat Sep 24 2016 15:06:50 GMT+0800 (中国标准时 ...
- vim vundle 安装Base16 Vim主题
1.vim /etc/vimrc set background=dark colorscheme base16-default 2.同样在vimrc中的vundle位置添加 Plugin 'chris ...
- 对express中引入文件时提示Error: Cannot find module错误的理解
打算写个小demo,在引入一个routes文件时,一直提示Error: Cannot find module('./routes')的错误,经过一番了解. 如果要把整个文件夹下所有的模块都引进来 v ...
- 图概PHP生命周期
一图胜千言~ 这是之前根据网上大牛们的分析和跟着阅读了一点源码而做出来的总结.因为那时候困于对整个过程没有一个全面的认识,所以想自己做个图吧,那样看起来要更加直接了当,说不定还能会有一个更好的认识和更 ...
- jq attr()改变checkbox的checked无效!!!!
今天做项目发现用attr()改变checked,实现全选功能的时候发现,第一次点击有效,之后点击全选功能便实效. 一开始以为是自己写错了,在各种碰壁之后,才猛然发现,原来这是jq的一个小bug. 在j ...