html中img小图标与文字不对齐的解决方式

     
    
干活呢

.a img {
  width: 20px;
  height: 15px;
  margin: 0px 10px 0 15px;
}

.a p{
    display: block;
    width: calc(100% - 55px);
    height:21px;
    float: right;
    line-height: 21px;
    margin-right: 10px;
}

正常的设置字行高 会出现小图标和字略微不对齐的情况，

所以要对图标添加一些小操作

.a img {
    width: 20px;
    height: 15px;
    vertical-align: middle;
    margin: -5px 10px 0 15px;
}

加了一个垂直居中

加了一个上边距的反向定位

效果就这样：

 

大佬勿喷！！！！