图片文字上下居中对齐的方法

图文混排最常用到vertical-align:middle;

但是vertical-align是一个非常容易陷进去的坑，写项目的时候给img添加vertical-align:middle;

仔细看发现还是不对齐，再看html布局是：

<div ><img src> 文字按钮</div>

结果不对齐；

 

正确的写法：

<div ><img src> <span>文字按钮</span></div>

img,span{vertical-align:middle;}

　　重点：文字和图片要并列关系；

　　　　　　文字要添加标签；

　　　　　要给文字和图片标签都添加上vertical-align:middle