专业网站建设、优化推广、软文发布,七年网站建设经验,拥有近千家客户
24小时服务热线:13958850180
建站经验
css实现的让图片垂直居中的方法
上传时间:2013/11/14    来自:瑞安网站建设

下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。

但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器都会有1px-3px的偏差。

方法一 (XHTML 1.0 transitional):

该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。

HTML结构部分:

CSS样式部分:




方法二 (XHTML 1.0 transitional):

方法二和方法一的实现的原理大同小异,结构也是相同的,方法一用的是条件注释,方法二就用的CSS Hack。

CSS样式部分:

该方法有个弊端,在标准浏览器下由于外部容器#box的显示模式为display:table-cell,所以导致#box无法使用margin属性,并且在IE8下设置边框也无效。

方法三 (XHTML 1.0 strict):

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法。

HTML结构部分:

CSS样式部分:




方法三也同样适用XHTML 1.0 transitional。以上方法都是收集于脚本之家,暂时只对这3个方法比较满意,兼容性方面不错,使用起来的限制也比较小,还有些方法我也都一一测试过,效果都不理想,在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。

思考:很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中,也就是div来模拟table,如果CSS有一个属性来实现这种效果那该多好。

                 瑞安网站建设专业服务商--瑞安市联创网络信息有限公司    电话:13958850180

上一条新闻:没有了 下一条新闻:策划企业网站注意事项

联系我们

0577-65888028

24小时咨询电话:13958850180
E-mail:289714316@qq.com
QQ:289714316
技术及产品渠道:0577-65885505
QQ:52625503
地址:瑞安市虹北锦园A幢1单元1606室
浙ICP备14031318号-2