a标签中的图标和文字如何上下对齐

实现效果：

主要代码：

html:

<div class="home-category-detail">
    <a :href="item.href" v-for="(item,index) in homeCategoryDetail" :key="'phoneNavList' + index" >
         <img :src="item.src" :alt="item.name">
         <span>{
   
   {item.name}}</span> 
    </a>
</div>
/* homeCategoryDetail 是这样的
{
    name: '小米10至尊纪念版',
    price: 5299,
    href: 'https://www.mi.com/buy/detail?product_id=12609',
    src: require('../src/assets/images/phone/pms_1597145894.51396359.jpg')
},
*/

css:

 .home-category-detail {
       height: 460px;
       background: #fff;
       line-height: 70px;  // 必加
       a {
          height: 70px; // 必加
          width: 228px;
          text-align: left;
          img {
               height: 50px;
               width: 50px;
               vertical-align: middle; // 必加
          }
          span {
               display:inline-block; // 必加
          }
       }

   }