CSS让图片垂直居中的几种技巧
来源:互联网 发布:手机音序器软件 编辑:程序博客网 时间:2024/04/28 07:58
在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。
方法一
将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title><style type="text/css">body { height:100%;}#box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff;}#box span{ display:table-cell; vertical-align:middle;}#box img{ border:1px solid #ccc;}</style><!--[if lte IE 7]><style type="text/css">?#box{ position:relative; overflow:hidden;}#box span{ position:absolute; left:50%;top:50%;}#box img{ position:relative; left:-50%;top:-50%;}</style><![endif]--></head><body><div id="box"> <span><img src="images/demo_zl.png" alt="" /></span></div></body></html>
方法二
标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title><style type="text/css">body { height:100%;}#box{width:500px;height:400px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box img{border:1px solid #ccc;}</style><!--[if IE]><style type="text/css">?#box i { display:inline-block; height:100%; vertical-align:middle }#box img { vertical-align:middle }</style><![endif]--></head><body><div id="box"> <i></i><img src="images/demo_zl.png" alt="" /></div></body></html>
方法三
在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title><style type="text/css">body { height:100%;}#box{ width:500px;height:400px; text-align:center; border:1px solid #d3d3d3;background:#fff;}#box p{ width:500px;height:400px; line-height:400px; /* 行高等于高度 */}/* 兼容标准浏览器 */#box p:before{ content:"."; /* 具体的值与垂直居中无关,尽可能的节省字符 */ margin-left:-5px; font-size:10px; /* 修复居中的小BUG */ visibility:hidden; /*设置成隐藏元素*/}#box p img{ *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */ vertical-align:middle; border:1px solid #ccc;}</style></head><body><div id="box"> <p><img src="images/demo_zl.png" alt="" /></p></div></body></html>
0 0
- CSS让图片垂直居中的几种技巧
- CSS让图片垂直居中的几种技巧
- CSS让图片垂直居中的几种技巧
- CSS让图片垂直居中的几种技巧
- 通过css让标签左右垂直居中的几种
- css垂直居中的几种方式
- CSS垂直居中的几种方法
- css垂直居中的几种方法
- 图片垂直居中的几种方法
- 用css使图片垂直居中技巧
- css布局小技巧之:让一个小图片水平靠右对齐,垂直居中
- 让DIV水平和垂直居中的几种方法
- 几种可以让元素水平垂直居中的方法
- 几种可以让元素水平垂直居中的方法
- 让图片垂直居中
- 让图片垂直居中
- css的几种垂直居中的方法
- css让容器水平垂直居中的n种方式
- IOS 监控网络变化
- XCode6.0中,如何使用XCode生成.ipa文件,以确定包尺寸?
- android开发一些实用类和方法
- FrangmentActivity和Activity的区别
- 程序设计:两个复数和差计算
- CSS让图片垂直居中的几种技巧
- MFC添加消息
- Myeclipse 快捷键大全
- jquery validate使用和扩展规则
- 两个有序数组,求合并后的中间大的数。要求效率最高。
- 预处理器__FILE__,__LINE__,DATE__,__TIME__,__STDC__的使用
- MapReduce:详解Shuffle过程
- FragmentActivity与Fragment一起使用的缓存问题
- load-on-startup(SpringMvc中DispatcherServlet的加载配置)