现在用DIV来定位的方式使用得越来越广泛,在使用DIV定位图片的时候，发现DIV不能直接设置图片的垂直对齐方式.
有一个解决方法看起来很正宗。如下
<div id="Layer1"
style="position:absolute;
width:500px;
height:305px;
z-index:1;
background-color: #999999;
border: 1px none #000000;
padding-top:expression(this.style.top+(this.offsetHeight-mxh.offsetHeight)/2)"
align=center >
<img src="/help/UploadFiles_4256/200806/20080611155246678.gif" id=mxh>
</div>
style="position:absolute;
width:500px;
height:305px;
z-index:1;
background-color: #999999;
border: 1px none #000000;
padding-top:expression(this.style.top+(this.offsetHeight-mxh.offsetHeight)/2)"
align=center >
<img src="/help/UploadFiles_4256/200806/20080611155246678.gif" id=mxh>
</div>
但在使用了以后发现还是不能成功,其实在这个方法里面有两个问题:
- 1. this.style.top 取出来的不是数字而是一个字符串，例如 50px，所以expression里面没有办法运算。正确的方法应该是 this.style.pixelTop属性，这样取出来的才是数字。
- 2. 图片放到DIV里面以后，其top属性值的计算不再是从窗口的左上角开始计算，而是从DIV容器的左上角开始计算，因此DIV的上填充距离不需要再加上DIV的top值
依据以上两点，对上面的代码进行了修改，得到下面的这个方法:
<div id="Layer1"
style="
position:absolute;
left:261px;
top:50px;
width:251px;
height:105px;
z-index:1;
overflow:hidden;
border: 1px solid #0066CC;
padding-top:expression((this.offsetHeight-myImage.offsetHeight)/2);
"
align="center">
<img src="12.gif" width="70" height="76" align="absmiddle" id="myImage">
</div>
style="
position:absolute;
left:261px;
top:50px;
width:251px;
height:105px;
z-index:1;
overflow:hidden;
border: 1px solid #0066CC;
padding-top:expression((this.offsetHeight-myImage.offsetHeight)/2);
"
align="center">
<img src="12.gif" width="70" height="76" align="absmiddle" id="myImage">
</div>
附:有一个关键点提醒大家注意一下，图片要给出ID，才能进行计算
Gzwm.Net
文章录入：布冰 责任编辑：布冰
网友评论:（评论内容只代表网友观点，与本站立场无关！）【发表评论】