图片在父元素中上下居中(vertical-align的有效性)

　　在实际的使用中，会遇到img上下居中的问题：

 

　　1.一般情况下，将其放置在table中：可以自动的上下居中。

 

　　2.另外一种情况<即一般情况下>

　　　　以li中为例子：在无序列表中 li元素下的img属性(vertical-align:middle)，无法实现上下居中效果。

　　　　解决方法：

　　　　CSS样式

　　　　<style type="text/css">
　　　　li { 
   　　　　 width:500px;
   　　　　 height:200px;
   　　　　 border:#CCFF00 1px solid;
  　　　　  vertical-align:middle;
  　　　　  text-align:center;
  　　　　  display:table-cell
　　　　}
　　　　span {
 　　　　   display:inline-block;
 　　　　   height:100%;
   　　　　 vertical-align:middle
　　　　}
　　　　img {
　　　　    vertical-align:middle
　　　　}
　　　　</style>

　　　　HTML结构

　　　　<li><span></span><img src="momoe.jpg" width="79" height="39" /></li>

 

　　　　此方法是在li元素中增加一个span元素，通过设置span元素的样式，从而达到img元素居中的效果。

 

　　　　* 或者将span元素替换为一个img{height:100%;width:0;}也可以达到同样的效果。

　　　　　两者之间的区别是，span元素(辅助元素)需要设置vertical-align:center样式，而img元素(辅助元素)不需要设置。

 

　　　3. 一种较简便的方法：

　　　　　将父级元素的line-height和height参数设置为相同大小,且img需要设置vertical-alilgn:middle;