Vue text and image are not vertically centered

question

The span text and the image are not vertically centered.
The code is as follows

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

The effect picture is as follows

Draw the upper border as follows, it can be seen that the text and the picture are only aligned at the top

style change

Set text and pictures to be vertically centered

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

Effect