老问题,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代码实现垂直居中并且左飘
所有回答(11)
-2
对图片所在的div设置样式： margin:10px auto;
大哥,你说啥呢????? 请测试测试吧
-1
text-align='center',不知道这个可以不。
那是水平居中, 我这里需要水平+垂直居中
@coder_wang: 再加个margin:10px auto;。
@PursueZhang: 那是无效的.没那么简单.请测试测试
@coder_wang: 你要的是不是让图片从左到右依次排序啊。
@coder_wang: 你可能掉了这个：position:absolute。
@PursueZhang: 能贴出完整代码吗? 断断续续的不看不懂
@coder_wang: 第一张图片用float:right; position:absolute;后面的图片就用float:left; position:absolute;这个css是在div中的，你试试吧。
@PursueZhang: 大哥,我是想让IMG在div中垂直居中.并且这些包含img的div在父div中左漂浮.你的代码我试了根本无效
@coder_wang: 我靠，你这哪是一个问题啊，是好几个问题，一两句话是说不清楚的。
@PursueZhang: 只有一个问题,让IMG在DIV中居中,并且不影响DIV漂浮
@coder_wang:
什么鬼，你说的是div中的img元素居中，没有说是水平+垂直居中，自己问题都描述不清楚，还怪别人呀！
-1
如果DIV:divImgList的高是固定的，那你就将这个DIV内填充一下不就实现了。。。
.divImgList{padding:5px 0;}
大哥,... 请听题~
1
考虑ie6的话，木什么太好的办法，参考一下http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html这里的方案吧。
-1
请设置div的行高和div的高度一样
-1
0
我刚才也遇到了这个问题。
我是这样解决的。不知道是不是你要的答案
<img src="test.jpg" style="vertical-align:middle;display:table; text-align:center" />
最终我还是多嵌套了一层div来解决的,郁闷~
我做的页面发给你看一看，还是有办法
@coder_wang:
display: table-cell;
text-align: center;
vertical-align: middle;
@紫铃儿: 这个可以达到居中效果,可如果 IMG上层的div 加上float:left属性 就不会居中了
我解决的方法就是 img 的div外面 再套上一个div
@coder_wang: 然后设置最外层的div float:left
@穆桂英: 大哥，浏览了你的网站，太漂亮了，请问http://www.bl-sy.com/CompanySite/index.aspx?cid=1179这个站点中 主菜单下的大照片（喜迎新年...）是用什么技术做的？ 小弟是个菜鸟请多指教 嘿嘿
0
0
这个效果确实需要动脑筋。vertical-align: middle;
请访问http://www.teyua.com/place_view.jsp?id=31919e98-efbc-11e4-a92c-00163e003797查看实际效果。。。打开后随便点一张图片。
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>
0
没有那么麻烦啊，两行就能解决：
<style type = "text/css">
img {
display: block;
margin: auto;
}
</style>
