a标签中嵌套img和span导致span无法水平居中

注意：此问题是在ie浏览器及edge浏览器中出现的，chrome没有此问题。

1.页面结构

<a href="#">

    <img src="#" />

    <span>文字</span>

  </a>

2.样式

a{

    display: block;

    background: red;

    height: 40px;

    width: 200px;

    text-decoration: none;

  }

  a span{

    cursor: pointer;

    display: inline-block;

    line-height: 40px;

  }

3.效果，从下图可以看出文字没有水平居中

4.解决办法，给img添加浮动样式

a img{

    float:left;

  }

span中文字就可以水平居中了