关于DIV层下的图片垂直居中

DIV层下图片垂直居中如果不细研，还挺麻烦，今天特意研究了一下。

这里有一个成功例子

例子：

<style type="text/css">
.liehuotb-p-c {
display: table-cell;
vertical-align:middle;
height:140px;
width:50px;
text-align:center;
border:1px solid #090;
*font-size: 122px;/*IE6　7兼容*/
}
.liehuotb-p-c img { vertical-align:middle; }
</style>
<div class="liehuotb-p-c"><img src="http://www.veryhuo.com/templets/images/mood/ico-mood-2.gif"/></div>

 

解释，这个例子相对网上很多例子来说，简单得多。

但有几点要注意

1.如果此DIV层加了float:left，就会失效，则必须在外边加多一个层写float。

2.IE6　7的兼容中，只需要添加font-size就可以了，这可能是IE6读取层高度的一个hack吧。