首页 新闻 搜索 专区 学院

老问题,div中的img元素居中.

1
悬赏园豆:50 [已关闭问题] 关闭于 2016-03-25 14:19

HTML格式:

<div class="divImgList">
<div class="divImgItem">
<img src="Images/hero1_20111024.png"/>
</div>
<div class="divImgItem">
<img src="Images/hero2_20111004.png"/>
</div>
<div class="divImgItem">
<img src="Images/hero3_20111004.png"/>
</div>
</div>

1:不要使用Js ;  

2:不要在IMG上再嵌套一层div来实现

3:IE6/7/8,firefox,chrome兼容, 

4: .divImgItem层支持float left
5: 代码尽量精简,最好能讲解原理
实现效果如图: (把那些图片垂直居中.图片大小不定,但最大高度是80px 最大宽度 120px)
问题补充:

以上1-5条是条件,最后的目的是让IMG在DIV中能垂直居中.

 

为什么大家都不愿意试试写代码呢?相关的答案我全部都看过,包括老外网站上的很多方法. 垂直居中并且div左漂浮我也能够实现,但就是必须得再套上一个div才行.请实干派按我此贴上的HTML写css代码实现垂直居中并且左飘

coder_wang的主页 coder_wang | 初学一级 | 园豆:193
提问于:2011-11-28 15:13
< >
分享
所有回答(11)
-2

对图片所在的div设置样式: margin:10px auto;

水牛刀刀 | 园豆:6350 (大侠五级) | 2011-11-28 15:58

大哥,你说啥呢?????  请测试测试吧

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-11-28 16:03
-1

text-align='center',不知道这个可以不。

悟行 | 园豆:12240 (专家六级) | 2011-11-28 16:00

那是水平居中,  我这里需要水平+垂直居中

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-11-28 16:02

@coder_wang: 再加个margin:10px auto;。

支持(0) 反对(0) 悟行 | 园豆:12240 (专家六级) | 2011-11-28 16:04

@PursueZhang: 那是无效的.没那么简单.请测试测试

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-11-28 16:57

@coder_wang: 你要的是不是让图片从左到右依次排序啊。

支持(0) 反对(0) 悟行 | 园豆:12240 (专家六级) | 2011-11-28 16:59

@coder_wang: 你可能掉了这个:position:absolute。

支持(0) 反对(0) 悟行 | 园豆:12240 (专家六级) | 2011-11-28 17:01

@PursueZhang: 能贴出完整代码吗? 断断续续的不看不懂

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-11-28 17:03

@coder_wang: 第一张图片用float:right; position:absolute;后面的图片就用float:left;  position:absolute;这个css是在div中的,你试试吧。

                     

支持(0) 反对(0) 悟行 | 园豆:12240 (专家六级) | 2011-11-28 17:06

@PursueZhang: 大哥,我是想让IMG在div中垂直居中.并且这些包含img的div在父div中左漂浮.你的代码我试了根本无效

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-11-28 17:36

@coder_wang: 我靠,你这哪是一个问题啊,是好几个问题,一两句话是说不清楚的。

支持(0) 反对(0) 悟行 | 园豆:12240 (专家六级) | 2011-11-28 17:38

@PursueZhang: 只有一个问题,让IMG在DIV中居中,并且不影响DIV漂浮

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-11-28 17:55

@coder_wang: 

什么鬼,你说的是div中的img元素居中,没有说是水平+垂直居中,自己问题都描述不清楚,还怪别人呀!

支持(0) 反对(0) xgqfrms | 园豆:114 (初学一级) | 2016-08-02 21:00
-1

如果DIV:divImgList的高是固定的,那你就将这个DIV内填充一下不就实现了。。。

.divImgList{padding:5px 0;}

KivenRo | 园豆:1722 (小虾三级) | 2011-11-28 19:42

大哥,...   请听题~

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-11-29 08:49
1

考虑ie6的话,木什么太好的办法,参考一下http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html这里的方案吧。

chameleon | 园豆:311 (菜鸟二级) | 2011-11-28 23:14
-1

请设置div的行高和div的高度一样

通通的成长日记 | 园豆:205 (菜鸟二级) | 2011-11-29 15:38
-1

这样的文章一大把吧,原理也讲的很清楚,比如:

垂直居中的几种实现方法 

http://sofish.de/1909

三桂 | 园豆:3565 (老鸟四级) | 2011-11-29 23:38
0

我刚才也遇到了这个问题。

我是这样解决的。不知道是不是你要的答案

<img src="test.jpg" style="vertical-align:middle;display:table; text-align:center" />

穆桂英 | 园豆:176 (初学一级) | 2011-11-30 19:57

最终我还是多嵌套了一层div来解决的,郁闷~

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-12-01 08:54

我做的页面发给你看一看,还是有办法

支持(0) 反对(0) 穆桂英 | 园豆:176 (初学一级) | 2011-12-01 12:10

@coder_wang: 

http://www.bl-sy.com/CompanySite/index.aspx?cid=1179,你看一看。

支持(0) 反对(0) 穆桂英 | 园豆:176 (初学一级) | 2011-12-01 12:10
    displaytable-cell;
        text-aligncenter;
    vertical-alignmiddle;
   
支持(0) 反对(0) 穆桂英 | 园豆:176 (初学一级) | 2011-12-01 12:12

@紫铃儿: 这个可以达到居中效果,可如果  IMG上层的div 加上float:left属性 就不会居中了

 

我解决的方法就是 img 的div外面 再套上一个div

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-12-02 11:39

@coder_wang: 然后设置最外层的div float:left

支持(0) 反对(0) coder_wang | 园豆:193 (初学一级) | 2011-12-02 11:39

@穆桂英:  大哥,浏览了你的网站,太漂亮了,请问http://www.bl-sy.com/CompanySite/index.aspx?cid=1179这个站点中 主菜单下的大照片(喜迎新年...)是用什么技术做的? 小弟是个菜鸟请多指教  嘿嘿

支持(0) 反对(0) KevinWong2008 | 园豆:212 (菜鸟二级) | 2013-01-14 10:57
0
dudu | 园豆:38841 (高人七级) | 2012-12-07 10:14
0

这个效果确实需要动脑筋。vertical-align: middle;

请访问http://www.teyua.com/place_view.jsp?id=31919e98-efbc-11e4-a92c-00163e003797查看实际效果。。。打开后随便点一张图片。

西蒙CODE | 园豆:202 (菜鸟二级) | 2015-05-03 01:36
0

so easy!

<style>

#i1,#i2,#i3,#i4{
position: absolute;
margin-left:10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 10%;
width:80% ;

height:80%;
}

</style。

<div class="divImgList">
<div class="divImgItem">
<img  id="i1" src="Images/hero1_20111024.png"/>
</div>
<div class="divImgItem">
<img id="i2"src="Images/hero2_20111004.png"/>
</div>
<div class="divImgItem">
<img id="i3"src="Images/hero3_20111004.png"/>
</div>
</div>

xgqfrms | 园豆:114 (初学一级) | 2015-07-29 22:15
0

没有那么麻烦啊,两行就能解决:

<style type = "text/css">
img {
display: block;
margin: auto;
}
</style>

镶花金盾 | 园豆:202 (菜鸟二级) | 2015-11-11 08:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册