找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2423|回复: 5

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

[复制链接]
发表于 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>这样呢?加个链接呢?一样的就不说了,谢谢各位
发表于 2010-12-21 20:45:44 | 显示全部楼层
居中直接用table吧,不纠结于css了
回复 支持 反对

使用道具 举报

发表于 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 }
回复 支持 反对

使用道具 举报

发表于 2010-12-23 13:29:38 | 显示全部楼层
如果楼主在img外部套用a的话
在a标签里写display:inline-block;
在a的父级标签里上text-aglin:center;
回复 支持 反对

使用道具 举报

发表于 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;
回复 支持 反对

使用道具 举报

发表于 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 少两像素    高也一样
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-2-28 08:19 , Processed in 0.055255 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表