纯CSS图片垂直居中,兼容IE6/IE7
Author: Vic.Wang 2015/07/15
制作网页的时候,常常会遇到很多 logo 图标排在一起的图标墙,每个图标的位置大小是固定的,但是logo的大小却很不一样,有长的有短的,有宽的有高的,有很大的也有很窄的,我们为了好看需要把图标弄的一致,设计师去做当然是最完美了,但有时候这些logo是后台取的,是用户上传的。
这个时候就需要我们程序去控制了,可以用JS去判断宽高比动态调整,但用JS毕竟麻烦了些,能用CSS搞定当然最好了,介绍一种CSS的方法,兼容IE6/IE7哦。
示例logo如下:

效果如下:


为了看的清楚,第二个位置加了背景色。
HTML代码:
CSS代码:
.pic-size{ width: 140px; height: 100px; border: 1px solid #eee; *position: relative; } .pic-wrap{ height: 100px; display: table-cell; vertical-align: middle; *height: auto; *position: absolute; *top: 50%; } .pic-wrap img{ float: left; width: 100%; *position: relative; *top: -50%; *display: block; }
标准浏览器中,改变display的属性为
而IE6/IE7兼容的方法则是利用了定位,先将top的属性值设置为
这种方法对于logo宽度大于或略小于位置的宽度是很不错的,logo很窄很窄那就不理想了。
本文地址:http://blog.mingsixue.com/effect/CSS-image-vertical-center.html
文章若需转载,请附上原文链接,谢谢配合。^_^