css+div 图片文字垂直居中问题 （转）

在div+css制作网页中，经常会出现div或者li中文字底部或者顶部对齐无法居中的问题，设置了vertical-align=middle（垂直对齐）仍然无法实现。这是因为vertical-align适用于in-line和table-cell，对于div，li，p等块级元素是不生效的。原理是这个原理，使用中太多情况会需要垂直居中，其中解决办法很简单，下面针对常见的两种情况进行说明，以li为例，div相同。

1、li中仅有文字，图片无或作为背景
如：<ul><li class="vm">我需要居中</li><ul>

.vm{ height:20px; line-height:20px;}    //只需要设置line-height和元素的height相同即可实现文字居中；
2、 li中插入图片img和文字，图片与文字无法居中对齐
如：<ul><li class="vm"><img src="/image/photo.jpg" />我和照片要居中对齐</li></ul>
这种情况可以对li中的img标签进行定义css样式设置垂直居中，即可解决：
.vm img{ vertical-align:middle;}