Vue のテキストと画像が垂直方向の中央に配置されていません

質問

スパン テキストと画像が垂直方向に中央揃えされていません。
コードは次のとおりです。

<div>
     <span class="vedioWenzi">视频监控</span>
     <img class="vedioImage" src="../assets/image/iot/lean.png"/> 
</div>

エフェクト画像は以下の通りです

上の枠線を以下のように描画すると、テキストと画像が上部のみに配置されていることがわかります

スタイルチェンジ

テキストと画像を垂直方向の中央揃えに設定する

.vedioWenzi{
    
    
	vertical-align: middle;
}
.vedioImage{
    
    
	vertical-align: middle;
}

効果