[导入]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

转载于:https://www.cnblogs.com/sliuqin/archive/2007/12/06/1018811.html