图片在层中如何垂直居中？

来源：百度知道 编辑：UC知道 时间：2024/09/24 20:29:49
我定义了一个宽100像素，高200像素的层，现在要在层中插入1个60*80PX的小图片，要求图片在竖直方向居中对齐，怎么实现啊？？？？我用的是padding-top:10px做的，请问还没有什么好办法啊？？？

<div class="box">
<img src="http://publish.it168.com/2008/0527/images/1021354.jpg" />
</div>
<style type="text/css">
.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:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}

</style>
这是我看的一篇例子，我实验过了，只有像他这样：层200*200的时候才可以垂直居中，如果层高增加了，根本就不行了！水平居中text-align:center就可以实现！不过.....垂直居中实在不行用表格的valign得了