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>
<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>
<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的左上角了。