div下的img总是有问题

myselfdo · 发表于 2010-12-21 19:11:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css" media="all">
*{padding:0px; margin:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif,"宋体"}
.clear{clear:both}
img{ border:0px}
ul{list-style:none;}
a{text-decoration:none}

.ad_show{ border:1px solid #FF6600; width:298px;margin:18px auto; height:114px; text-align:center}
.ad_show img{ padding:2px; display:block; height:108px; width:292px}

</style>
<body>
<div class="ad_show"><img src="images/banner_sider_a.jpg" /></div>
</body>
</html>

问题一：就是在一个div 或者其他的盒子内放一个img，我想让它居中，带有一定的边距和外边框，可是发现总是不能摆正位置。？？？？？

问题二：如果<div class="ad_show"><a href="#"><img src="images/banner_sider_a.jpg" /></a></div>这样呢？加个链接呢？一样的就不说了，谢谢各位

li101207 · 发表于 2010-12-21 20:45:44

居中直接用table吧，不纠结于css了

xiongdan506 · 发表于 2010-12-23 10:19:21

.ad_show{ border:1px solid #FF6600;width:292px;padding:10px;text-align:center}
.ad_show img{display:block; height:108px;width:292px }

businessDiv · 发表于 2010-12-23 13:29:38

如果楼主在img外部套用a的话
在a标签里写display:inline-block;
在a的父级标签里上text-aglin:center;

mxwzyijianfei · 发表于 2010-12-23 13:56:38

你仔细看看这一段代码:
.ad_show{ border:1px solid #FF6600; width:298px;margin:18px auto; height:114px; text-align:center}
.ad_show img{ padding:2px; display:block; height:108px; width:292px}

首先我先说的就是.ad_show他的总宽度是298+1=299;高114+1=115

其次.ad_show img他的总宽度是292+2+2=296;高108+2+2=112

你想想.ad_show的宽度和高度和.ad_show img的值对比下.在默认的情况看下怎么能居中呢?你应该在.ad_show img设置它的属性居中才行;为了预防IE更老的版本,我建议你在
body设置它的margin:0px;padding:0px;

llqfront · 发表于 2010-12-23 14:34:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" media="all">
*{padding:0px; margin:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif,"宋体"}
.clear{clear:both}
a img{ border:none;}
ul{list-style:none;}
a{text-decoration:none}

.ad_show{ border:1px solid #FF6600;width:298px;margin:18px auto; height:114px; text-align:center;background-color:red;}
.ad_show img{ padding:2px; display:block; height:110px; width:294px;}
.ad_show a{display:block;}

</style>
<body>
<div class="ad_show"><a href="#"><img src="1.gif" /></a></div>
</body>
</html>

你把图片的宽度和外面的宽度弄的一样  还要什么居中呀还有你的图片的padding值和宽度加一起也不一样呀

如果的你的问题是图片大小不等要居中有个js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="style/css.css" rel="stylesheet" type="text/css" />
<meta name="generator" content="editplus" />
<meta name="author" content="爱得太迟" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#i_div {width:500px;height:500px;position:relative;border:1px solid red;}
#i_div img {position:absolute;}
</style>
<script type="text/javascript">
function img(){
var ai = document.getElementById("i_div");
var aideimg = document.getElementById("i_img");
var h = ai.offsetHeight;
var w = ai.offsetWidth;
var ih =aideimg.offsetHeight;
var iw =aideimg.offsetWidth;
aideimg.style.top= (h-ih)/2+"px";
aideimg.style.left= (w-iw)/2+"px";
}
</script>
</head>
<body>

<div id="i_div">
<img id="i_img" src="images/1.gif" alt="" onload="img()"/>
</div>
</body>
</html>
div下图片不会有问题看看设置是不是对仔细点刚才你的宽  2+2 +292 = 296 少两像素高也一样

帐号		自动登录	找回密码
密码			注册

[求助] div下的img总是有问题