图片的垂直居中

图片的垂直居中一直很不好做,要兼容IE6,7,8和FF,safari这些浏览器,很是头痛。同事给了个样例。实际上,我对这些前端的css hack真是厌烦透顶,单看这个页面源码,几乎看不到为何它在各个浏览器下都能很好的生效,但牛B的是,它就是生效了。说不定哪一句就影响了浏览器的布局和定位。


HTML

<div class="wrap">
    <span class="container">
        <img src="http://img1.cache.netease.com/img09/logo/logo_v1.gif" alt="" />
    </span>
</div>

对应的css:


CSS

.wrap {
    width:800px;
	height:500px;
	text-align:center;
	display:table-cell;/* for opera */
	vertical-align:middle;/* for opera */
	background:#ddd;
}
.container {
    display:inline-block;
	text-align: center;
	vertical-align:middle;
}
.edge {
     width:0;
	 height:100%;
	 display:inline-block;
	 vertical-align:middle;
}

0 comments:

Leave a Reply

Your email address will not be published. Required fields are marked *