| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2060 人关注过本帖
标题:div 中如何让图片居中?
只看楼主 加入收藏
junge0901
Rank: 1
等 级:新手上路
帖 子:11
专家分:0
注 册:2010-8-28
结帖率:33.33%
收藏
已结贴  问题点数:10 回复次数:6 
div 中如何让图片居中?
如题,也就是图片处于这个DIV的中心。
搜索更多相关主题的帖子: div 
2010-09-01 12:41
浮心
Rank: 2
等 级:论坛游民
帖 子:11
专家分:10
注 册:2010-8-30
收藏
得分:3 
程序代码:
<style>
    .spancss{display:inline-block;*display:inline;*zoom:1;height:100%;width:1px;margin-left:-1px;vertical-align:middle}
    *{padding:0px;margin:0px;}
    .conn{width:500px;height:500px;border:1px solid #000;text-align:center;}
    .conn img{width:400px;height:400px;vertical-align:middle;}
</style>
<div class="conn"><img src=""><span class="spancss"></span></div> 
水平居中好说,主要是垂直居中怎么设置。用到了vertical-align属性。
手册上说该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,所以为了加以利用就在img同一行放了一个与外层div等高的span元素,这样图片的垂直位置vertical-align就是以这个span为参照的,设置为middle即在span的中间位置,也就是在div的中间了
2010-09-01 14:33
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:3 
FF下设置vertical-align根本没效果!一般都是用margin:25px auto;左右25PX自己调整,感觉怎么样合适就怎么调!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-09-01 17:12
浮心
Rank: 2
等 级:论坛游民
帖 子:11
专家分:10
注 册:2010-8-30
收藏
得分:0 
以下是引用gupiao175在2010-9-1 17:12:40的发言:

FF下设置vertical-align根本没效果!一般都是用margin:25px auto;左右25PX自己调整,感觉怎么样合适就怎么调!
这么说的话你最好先测试一下子。
首先,margin:25px auto; 直接这么给img设置样式貌似水平上不会如你想的那样居中,需要在img外面加个div或者别的。
其次,margin:25px也不会有令人满意的效果,只是上面空出25个像素而已,并不是楼主想要的在中间显示。
如果考虑到浏览器兼容的话,可以用js方法解决。根据外层div高度和img的高度计算出到底要margin-top多少个像素。
 
2010-09-01 17:42
junge0901
Rank: 1
等 级:新手上路
帖 子:11
专家分:0
注 册:2010-8-28
收藏
得分:0 
图片大小不确定,所以设置margin的方法不可取。
2010-09-01 21:01
浮心
Rank: 2
等 级:论坛游民
帖 子:11
专家分:10
注 册:2010-8-30
收藏
得分:0 
以下是引用junge0901在2010-9-1 21:01:12的发言:

图片大小不确定,所以设置margin的方法不可取。
用offsetheight获取啊!
2010-09-02 08:01
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
收藏
得分:3 
...
2010-09-02 08:29
快速回复:div 中如何让图片居中?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.016877 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved