图片垂直居中解决办法
文章来源:菏泽网络公司 文章作者:rainaxin 日期:2009年09月20日
上周做需求,遇到相册中要实现图片垂直居中的问题,记得之前自己遇到过,但是很久没有做忘记了,这次重新温习一遍。其实如果单是针对FF,一个很简单的属性就可以解决,但是问题是我们要考虑ie,没有办法,要针对ie单独的写hack。
上周做需求,遇到相册中要实现图片垂直居中的问题,记得之前自己遇到过,但是很久没有做忘记了,这次重新温习一遍。其实如果单是针对FF,一个很简单的属性就可以解决,但是问题是我们要考虑ie,没有办法,要针对ie单独的写hack。其实结构很简单:
<div class="img_wrap"> <img src="images/RED_0099.JPG" alt="桂林" /> </div> |
主要是样式书写,代码如下:
.img_wrap{/*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; text-align:center; *display: block; *font-size: 131px;/*约为高度的0.873,150*0.873 约为131*/ width:150px; height:150px; border: 1px solid #ccc;} .img_wrap img{vertical-align:middle;} |
显示效果如下:
但是如果给img外边的标签添加一个属性就会使得在ff下面失效。图片在ff下面就不会垂直居中显示:
这个干扰属性就是浮动,上面的效果就是给img外边的div添加了以float:left属性,所以大家如果利用相同的办法不能使得图片垂直居中,可以查找下是不是利用了浮动。
当然这个只是其中的一个办法,还有其他的方法,大家可以继续进行探讨。
原文地址:http://www.rainaxin.com/2008/12/css-vertical-centering-images-part1/
相关文章
- ·09/291997年至2009年 中国电子商务十二年大事记
- ·09/29js中的文档模式-document.compatMode
- ·09/29轻松搞定IE的CSS制作网页技巧3则
- ·09/29Adobe Flash:腹背受敌与何去何从
- ·09/27网络时代下商品评价的重要性
- ·09/27轻松搞定IE的CSS制作网页技巧3则
- ·09/27卢松松:如何修改源码的网页模板?
- ·09/27名师讲堂之Kent Beck——响应式设计
- ·09/26分享英文音乐网站的经营经验
- ·09/2617个Joomla教程和模板网站