您现在的位置: 动易技术中心 >> 动易产品知识库 >> SiteFactory常见问题 >> 正文
DIV架构下的图片居中问题

现在用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>


但在使用了以后发现还是不能成功,其实在这个方法里面有两个问题:

 

  1. 1. this.style.top  取出来的不是数字而是一个字符串,例如 50px,所以expression里面没有办法运算。正确的方法应该是 this.style.pixelTop属性,这样取出来的才是数字。
  2. 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>

 

附:有一个关键点提醒大家注意一下,图片要给出ID,才能进行计算

文章录入:luotoal    责任编辑:luotoal 
  • 上一篇文章:

  • 下一篇文章: 没有了
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    动易SiteFactory标签说明
    动易2006网站标签说明列表
    用户手册下载
    联系我们 | 关于动易 | 网站地图 | 相关证书 | 合作伙伴 | 招贤纳士 | 法律条款 | 隐私权声明
    安全上网网上报警
    动易网络科技有限公司版权所有 © 2003-  粤ICP备05004015号
    公安备案编号:4406063010734 本站基于 PowerEasy® SiteWeaver™ 制作