[导入]CSS图片垂直居中方法


1、使用display：table-cell；vertical-align:middle;
<style type="text/css">
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
/* hack for ie */
 *display: block;
*font-size: 175px;
/* end */
border: 1px solid #eee;
}
.box img {
vertical-align:middle;
}
</style>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算，高度/字体大小的比值为1.14左右时IE可实现垂直居中。
 
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
line-height:200px; /*这方法只能在ff中有作用，在IE中就没效果*/
border: 1px solid #eee;
}
.box img {
vertical-align:middle;
}
  下面这方法实现了浏览器的兼容
#xxx{
text-align:center;    /*实现水平居中*/
width:200px;
height:200px;
border:1px solid #ff0;
vertical-align: middle;
display: table-cell;
}
#xxx img{
margin-top:expression(100-this.height/2);   /*"100" 是高度值的一半*/
}
 
2、display:inline-block 方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
div {
display:table-cell;
height:300px;
width:500px;
text-align:center;
border:1px solid #000;
vertical-align:middle
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->
<div>
<i></i>
<img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div>
 
3、标准浏览器严格型申明下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

文章来源:http://link-to.cn/post/2007/12/CSStpczjzff.aspx
posted @ 2007-12-06 10:49  sliuqin  阅读(431)  评论(0)  编辑  收藏  举报