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;便可解決，單獨設置一個總感受對不齊

設置後：