图片img和文字span水平排列，在垂直方向上不居中的问题

图片和span水平垂直居中问题(主要解决小图标+文字水平垂直居中的问题)

原代码

<li>
    <a href="">
        <img class="thumb" src="./images/product-images/phone-items.webp" alt="">
        <span class="text">Note 11T Pro+</span>
    </a>
</li>

li a{
    display: block;
    width: 225px;
    height: 40px;
    padding: 18px 20px 18px 20px;
    background-color: blue;
}
.thumb{
    margin-right: 12px;
}
.text{
    float: left;
    font-size: 14px;
    line-height: 40px;
}

对文字span使用height=line-height也无法使文字垂直居中
并且span的padding和maigin均无效果
通过对img设置垂直居中实现了将文字居中，虽然我不理解vertical-align:middle;
修改后的css代码

li a{
    display: block;
    width: 225px;
    height: 40px;
    padding: 18px 20px 18px 20px;
    background-color: blue;
}
.thumb{
    vertical-align:middle;
    margin-right: 12px;
}
.text{
    float: left;
    font-size: 14px;
    line-height: 40px;
}

最后的效果