css如何让图片和文字在行内居中显示

最近在使用iview的图标库，发现找不到合适的图标，只好自己去用图片生成图标了，但发现图片与后面的文字总是不能很好的对齐

最终通过图片和文字分别添加vertical-align: middle;来实现了两个同时在行内居中效果

.icon-light {
 display: inline-block;
 width: 25px;
 height: 35px;
 background: url('../light.png') no-repeat;
 background-size: 18px 18px;
 background-position: center;
 background-repeat: no-repeat;
 vertical-align: middle;
}
    <el-table-column align="center" label="电量状态">
      <template slot-scope="scope">
        <span v-if="scope.row.light==='百分之50'"><i class="icon-light"></i><span style="vertical-align: middle;">{{scope.row.light}}</span></span>
         <span v-else>{{scope.row.light}}</span>
       </template>
    </el-table-column>