爱分享 css控制图片垂直水平居中支持IE6、IE7、IE8、FF等…

爱分享 css控制图片垂直水平居中支持IE6、IE7、IE8、FF等…

这个问题其实在之前的table构架的网页里根本不是啥问题,因为table构架的网页,默认就是垂直居中显示。但是细心的朋友可能发现,在DIV构架的容器里面,图片默认都是left top显示的,对于水平居中,都是通用的做法,text-align:center;

但是对于垂直居中,可就大不一样了,对于非IE的主流浏览器操作起来用以下代码即可实现:

display: table-cell;vertical-align:middle;text-align:center;

但是在IE6里面,这个无效,(万恶的IE6处处搞特殊,不过如果你IE不上路子,但是占有99%的市场份额,也就算了,问题是那么多浏览器都在瓜分市场,所以处处得考虑)

针对IE6得写HACK

*display: block;*font-size: 175px;*font-family:Arial;

其中*font-size: 175px;/*约为高度的0.873,200的0.873 约为175*/

其中*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

这些都是放置图片容器的CSS,放置的图片本身也要有CSS

img {vertical-align:middle;}

______________________________________________

完整样式代码如下:

<style>

.box {display: table-cell;vertical-align:middle;

text-align:center;*display: block;*font-size: 175px;

*font-family:Arial;

width:200px;height:200px;border: 1px solid #eee;}

.box img {vertical-align:middle;}

</style>

<div><img src=”你的图片地址” _fcksavedurl=”你的图片地址” /></div>

这样,也就实现了我们所需要的DIV当中图片垂直居中的要求。

爱分享 ? css控制图片垂直水平居中支持IE6、IE7、IE8、FF等…

http://www.ihref.com/read-12952.html

爱分享 css控制图片垂直水平居中支持IE6、IE7、IE8、FF等…

相关文章:

你感兴趣的文章:

标签云: