
程序代码:
<style>
.spancss{display:inline-block;*display:inline;*zoom:1;height:100%;width:1px;margin-left:-1px;vertical-align:middle}
*{padding:0px;margin:0px;}
.conn{width:500px;height:500px;border:1px solid #000;text-align:center;}
.conn img{width:400px;height:400px;vertical-align:middle;}
</style>
<div class="conn"><img src=""><span class="spancss"></span></div>
水平居中好说,主要是垂直居中怎么设置。用到了vertical-align属性。
手册上说该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,所以为了加以利用就在img同一行放了一个与外层div等高的span元素,这样图片的垂直位置vertical-align就是以这个span为参照的,设置为middle即在span的中间位置,也就是在div的中间了