网页设计

您的位置:首页 > 网站专题 > 网页设计 > 详细内容>

图片垂直居中解决办法

2010-09-22 21:57 作者: [大 中 小]

上周做需求,遇到相册中要实现图片垂直居中的问题,记得之前自己遇到过,但是很久没有做忘记了,这次重新温习一遍。其实如果单是针对FF,一个很简单的属性就可以解决,但是问题是我们要考虑ie,没有办法,要针对ie单独的写hack。其实结构很简单:

 

主要是样式书写,代码如下:

 

显示效果如下:

但是如果给img外边的标签添加一个属性就会使得在ff下面失效。图片在ff下面就不会垂直居中显示:

这个干扰属性就是浮动,上面的效果就是给img外边的div添加了以float:left属性,所以大家如果利用相同的办法不能使得图片垂直居中,可以查找下是不是利用了浮动。

当然这个只是其中的一个办法,还有其他的方法,大家可以继续进行探讨。