图片和文字水平对齐的方法

写页面的时候，经常遇到一个小图标图片需要和文字放在一起，包裹在一个父容器中，但是图片总是顶部和父容器顶端靠在一起，这样就导致图片总是比文字高上一点，这个问题遇到了很多次，之前没有进行总结，总是花式地把它们对齐在一起，比如手动调整margin-top，写定像素，把他们调到水平对齐，但这样既不优雅，也不安全，比如当高度为百分比或者em/rem时，margin-top的值也要以相同的形式去写，但是这种形式，是不够绝对精确的。

所以在此记录下我现在和以后使用过的“较优雅且安全的”图片和文字水平对齐的方法：

1. 对图片设置vertical-align: text-bottom;