vue文字与图片不垂直居中对齐

问题

span文字与image图片没有垂直居中对齐
代码如下

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

效果图如下

绘制上边框如下，可以看出文字与图片只有顶部对齐

样式更改

设置文字与图片均垂直居中

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

效果