图片和文字垂直居中的方法

我不是前段开发高手，但是偶尔也做做网页，有时候遇到一些问题也挺闹心的，比如说让文字和图片垂直居中。

遇到好几次这样的问题，每次都是上网搜一下，草草解决，这次亲自尝试了下：

<div style="height:50px; line-height:50px; border:1px solid red;">

    <img src="logo.jpg" width="28px" height="28px" style="vertical-align:middle;" />

    <span>聚少离多非金属浪费空间</span>

</div>

关键：外层div加上height和line-height，在img里加上vertical-align:middle，成功了。