vue图片和文字不对齐是什么原因，span标签用margin等无法生效

代码部分
问题：我是一个图片一个文字的，但是效果是需要文字在图片的中间，我试过了，把span转换成块元素但是仍然使用不了margin，我用行高设置也不生效，实在没搞明白为啥这样呢。有什么办法解决还是我这写法有什么不对的。

 <div class="liaokuangbox">
        <img src="@/assets/from_GT/diannao.png" alt="" />
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="liaokuang1" />
        <span>###</span>
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="" />
        <span>###</span>
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="" />
        <span>###</span>
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="" />
        <span>###</span>
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="" />
        <span>###</span>
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="" />
        <span>###</span>
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="" />
        <span>###</span>
        <img src="@/assets/from_GT/liaokuang.png" alt="" class="" />
        <span>###</span>
      </div>

css部分

.liaokuangbox {
  margin-left: 20px;
  height: 60px;
  border: 1px solid red;
}
.liaokuangbox span {
  color: #a9dd20;
  font-size: 26px;
}
.liaokuang1 {
  margin-left: 70px;
}

转成inline-block然后加vertical-align: top;

.liaokuangbox img{
  vertical-align: middle;
 }

加入 vertical-align: middle;图片居中对齐

题主的意思是文字需要显示在图片上吗，还是跟图片水平居中对齐