未知高度图片垂直居中
解决这个问题的前提条件是该图片所在父级层必须是高度确定的，同时所谓的图片未知高度也应该是以父级层的高度为上限，即 0<图片高度<父级层高度；注意事项是，该层也不要有太复杂的html结构，不然也还是没法取得完美效果。我个人觉得解决这个问题纯粹是挑战WEB标准的技巧性手法而已，实际开发中应是优化整体的html结构代码规避这类问题是最好了。
<style>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:300px;
height:200px;
border: 1px solid #eee;
overflow:hidden;
}
.box img {/*设置图片垂直居中*/ vertical-align:middle; }
</style>
评论