单行图片与文字垂直居中的解决

又遇到单行文字与图片并排时文字垂直居中的问题，一般在做导航的时候这种情况比较常见。

如果图片很小和文字高度相差不大基本不用改，直接放到一起就行了。

如果图片大了，就会有问题，文字会在底部，这样看起来就不协调了，我以前是怎么做的呢，用两个div，分别左右浮动，一个放文字一个放图片，然后用padding调整高度。

不过代码多了点，比较繁琐，有没简单的方法呢，我今天找到了，嘿嘿，vertical-align:middle;

示例：

<style>
.test img{vertical-align:middle;padding-bottom:5px;}
</style>
<div class="test">测试文字 <a href="#"><img src="images/text.gif" /></a></div>

这样文字就垂直居中了，还可用padding来精确控制一下。ie/firefox/opera测试通过^_^