图标与文字对齐

icon图标与文字对齐

开发过程中经常遇到img和span标签包含的文字不对齐，设置vertical-align: middle发现图片icon还是会偏下

• 解决方案：
  设置img的vertical-align为top,然后设置margin-top属性

<div class="father">
  <img src="https://hl-blog.oss-cn-shanghai.aliyuncs.com/%E5%A4%B4%E5%83%8F.jpg"/>
  <span>右边文字</span>
</div>

.father {
  width: 60px;
  height: 60px;
}
img {
  width: 40px;
  height: 40px;
  vertical-align: top;
  margin-top: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}