ant的表格插入图片后，表格内容错位

Question

RT：我把表格内的表头插入图片后，整个表格的内容全部居于一行的下半部分，而图片则位于上半部分
求问对齐得怎么对齐
代码如下：

const columns = [{
            title: '商品信息',
            dataIndex: 'name',
            key:'name',
            render: (v, dt) =>
                <div className='tableImgBox'>
                    <div>
                        <img src={dt.logoUrl} alt="" />
                        <span className={dt.merchantMarketResourceBindId===undefined?'proprietarySpan':'cooperationSpan'}>{dt.merchantMarketResourceBindId===undefined?'自营':'合作'}</span>
                    </div>
                </div>
          }, {...}]

css部分如下：

.tableImgBox{
  position: relative;
  width: 70px;
  height: 70px;
    img{
      margin-top: 30px;
      width: 70px;
      height: 70px;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      display: inline-block;
      text-align: center;
      width: 30px;
      height: 15px;
      line-height: 15px;
      font-size: 12px;
      color: white;
    }
    .proprietarySpan{
      background-color: #1890FF;
    }
    .cooperationSpan{
      background-color: #F5744C;
    }
}

效果如下：

题目来源及自己的思路

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？