未知高度的图片垂直居中

#box{
	width:500px;height:400px;
	text-align:center;
	border:1px solid #d3d3d3;background:#fff;

	/* 兼容标准浏览器 */
	display: table-cell;
    vertical-align:middle;

	/* 兼容IE6/IE7 */
	*display:block;
	*font-size:349px;  /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
	*font-family:Arial;  /* 防止非utf-8引起的hack失效问题,如gbk编码 */
}

#box img{
	vertical-align:middle;
}

设置字体大小的方法感觉比较怪异,也没有看到一个合理的解释,只知道图片元素有一些不同于其他元素的特性,但是对于IE6/IE7来说,这个方法还是比较给力的。

posted @ 2012-03-13 10:32  闫森  阅读(190)  评论(0编辑  收藏  举报