2008-01-15

分别利用css和js来使div中的图片居中

CSS脚本如下： 
<style>
	.img_center{
		height:200px;
		width:200px;
		background-image:url("t4.jpg");
		background-repeat:no-repeat;
		background-position:center center;
	}
</style>
css实现图片居中：
<div style="border:1px solid windowtext;height:200px;width:200px;">
<img src="s.gif" class="img_center"/>
</div>

这里主要思路是把img的高度和宽度都设置为和div的一致，然后将图片作为背景显示来达到图片居中的目的，不过还需要利用一个s.gif（1*1）这个图片，ext就有。

JS脚本如下： 
<script type="text/javascript">
window.onload=function(){
	var img = document.getElementById("c_img");
	var div = document.getElementById("c_div");
	var height = div.style.height;
	var width = div.style.width;
	img.style.marginTop = (parseInt(height,10) - img.offsetHeight) / 2 + "px";
	img.style.marginLeft = (parseInt(width,10) - img.offsetWidth) / 2 + "px";
}
</script>
js实现图片居中：
<div id="c_div" style="border:1px solid windowtext;height:200px;width:200px;">
<img src="t4.jpg" id="c_img"/>
</div>

这样也可以实现图片居中，省去了s.gif这个图片，不过一定要浏览器打开脚本执行功能，不然的话，图片就只能蜗居在div的左上角了。
评论
发表评论

您还没有登录，请登录后发表评论

bazhuang
搜索本博客
最近加入圈子
存档
最新评论