注册 登录
编程论坛 JavaScript论坛

div 中如何让图片居中?

junge0901 发布于 2010-09-01 12:41, 2060 次点击
如题,也就是图片处于这个DIV的中心。
6 回复
#2
浮心2010-09-01 14:33
程序代码:
<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的中间了
#3
gupiao1752010-09-01 17:12
FF下设置vertical-align根本没效果!一般都是用margin:25px auto;左右25PX自己调整,感觉怎么样合适就怎么调!
#4
浮心2010-09-01 17:42
以下是引用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多少个像素。
 
#5
junge09012010-09-01 21:01
图片大小不确定,所以设置margin的方法不可取。
#6
浮心2010-09-02 08:01
以下是引用junge0901在2010-9-1 21:01:12的发言:

图片大小不确定,所以设置margin的方法不可取。
用offsetheight获取啊!
#7
foktime2010-09-02 08:29
...
1