HTML图片和文字上下对齐

//HTML
<div class="l4">
     <img src="../static/index/时间.png" alt />
     <span>{{item.see}}</span>
 </div>
            
            
//CSS          
.l4 {
          position: absolute;
          left: 0;
          bottom: 0;
          span {
            vertical-align: middle;
          }
          img {
            vertical-align: middle;
          }
        }

原始效果：

图片和span标签同时设置vertical-align: middle;便可解决，单独设置一个总感受对不齐

设置后：