小图标和文字对齐

图标大小20px，文字font-size有14px，有12px，发现文字的font-size变化，图标也跟着动来动去，想了个办法，把图片设置成绝对定位，这样字体再怎么变化，图标也是居中的

但是觉得很啰嗦的实现

<div style=" width: 560px;    height: 42px;    line-height: 42px;    border: 1px solid blue;    padding-left: 20px;">
  <img style="    margin-top: 9px;    position: absolute;    display: inline-block;    width: 20px;    height: 20px;    margin-right: 6px;
   " src="images/icon_alert_major.png s">
  <span style="margin-left:26px">cirtical</span>
</div>

搜了搜张大神的blog，果然发现一篇解决方式，试试看要

点击打开链接

还有就是设置外层是table-cell，然后vertica-align:minddle