css图片垂直居中，支持IE6+,chorme,ff

最新推荐文章于 2024-06-13 14:29:01 发布

原创最新推荐文章于 2024-06-13 14:29:01 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

Css 专栏收录该内容

5 篇文章

订阅专栏

本文提供了一种使图片在IE6、IE7和IE8及以上浏览器中居中的方法，并确保了良好的跨浏览器兼容性。对于IE6和IE7，通过特殊CSS属性实现图片居中；对于IE8及以上版本和其他现代浏览器，则采用另一种CSS布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ul.img_list li{float: left;width: 142px;height: auto;margin-right: 6px;}
ul.img_list li .pic{border: 1px solid #DFDFDF;width: 140px;height: 120px;}
ul.img_list li .pic a{border: 3px solid white;width: 134px;height: 114px;display: table-cell;vertical-align: middle;*display: block;*font-size: 100px;text-align: center;}
ul.img_list li .pic a:hover{border: 3px solid #D7D2D7;}
ul.img_list li .pic img{width: 130px; _width:expression((documentElement.clientWidth > 130) ? "130px" : "auto" );max-height: 110px;vertical-align:middle;border: none;}

ie6, ie7 图片居中：

容器样式：

*display: block;*font-size: 100px; // 当前容器高度 / 1.14 (114/1.14)

同时img 还需设置：vertical-align: middle;

ie8+和其他浏览器只要将容器样式设置为：

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