Home / Blog / effect

纯CSS图片垂直居中,兼容IE6/IE7

Author: Vic.Wang 2015/07/15 Tags:imageverticalcenter垂直居中图片垂直居中

制作网页的时候,常常会遇到很多 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的属性为table-cell,也就是变为表格形式,然后配合vertical-align的垂直居中就实现了。

而IE6/IE7兼容的方法则是利用了定位,先将top的属性值设置为50%,再在最里层img标签的top设置为-50%,就是CSS代码中的Hack部分。

这种方法对于logo宽度大于或略小于位置的宽度是很不错的,logo很窄很窄那就不理想了。