Js配合CSS实现的图片居中

CSS图上居中很好实现，但万恶的浏览器之间各不相让，搞的不兼容，还好我们有让其兼容的办法，那就是结合JS来实现，这样各个浏览器都听话多了。本例就是CSS结合JavaScript实现的图片垂直、水平方向都居中，也不是上下左右居中，位于网页的正中央，代码如下：

<body onresize="myLoad()" onload="myLoad()">
<div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px"><img id="ximage" src="/jscss/demoimg/wall_s8.jpg"/></div>
<SCRIPT language="javascript" type=text/javascript>
function myLoad()
{
document.getElementById('xuanma').style.top= document.body.clientHeight/2-document.getElementById('ximage').height/2;
document.getElementById('xuanma').style.left= document.body.clientWidth/2-document.getElementById('ximage').width/2;
}
</SCRIPT>
</body>

复制代码保存成HTML页面，双击打开可测试效果。

posted @ 2015-03-12 21:59  壁虎漫步.  阅读(991)  评论(0)  编辑  收藏  举报