img控件的居中显示 ---js技术 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#picbox{width:200px;height:200px;background:#ccc;}
#picbox img{width:100px;height:100px;}
</style>
<script>
function setCenter(Xelement)
{
    var parent=Xelement.parentNode;
    parent.style.position="absolute";
    Xelement.style.position="absolute";
    var left=(parent.clientWidth-Xelement.clientWidth)/2;
    var top=(parent.clientHeight-Xelement.clientHeight)/2;
    Xelement.style.left=left+"px";
    Xelement.style.top=top+"px";
}
</script>
</head>
<body>
<div id="picbox">
  <img id="img1" src="2.jpg" alt="" onload="setCenter(this)"/>
</div>
</body>
</html>

 

posted @ 2015-04-21 15:38  记忆书签  阅读(515)  评论(0)  编辑  收藏  举报