如何使图片在div里上下居中
文章来源：365jz.com 点击数：3269 更新时间：2009-12-21 23:58 参与评论
<style type="text/css">
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
width:100px;
height:100px;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
cursor:pointer;
}
</style>
Dom元素:
<div id="div1" class="box">
<img src="xxx.png" /><br />风华绝代
</div>
这种方式在ie8和firefox3.5中显示正确，在ie7及以下版本无法正确显示，其它浏览器没有测试。因此改成了下面的方式：
.box{
float:left;
width:80px;
height:80px;
border: 1px solid #eee;
}
.selected {
border:solid 1px black;
background-color:Aqua;
cursor:pointer;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
cursor:pointer;
}
float:left;
width:80px;
height:80px;
border: 1px solid #eee;
}
.selected {
border:solid 1px black;
background-color:Aqua;
cursor:pointer;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
cursor:pointer;
}
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
- 上一篇：收藏CSS经典技巧
- 下一篇：设置iframe的背景色及填充iframe
