使用 flex 布局处理 左面图 右文字的需要注意的css问题

.bottom-pay__tips {
  width: 100%;   //默认百分百
  height: 22px;
  font-size: 14px;  
  font-weight: 400;
  color: #333333;
  line-height: 22px;   //备注：如果使用flex 的话，默认会 根据内部的font-size默认的 进行自动line-height, 会和UI图产生一点点的差距
  display: flex;
  align-items: center;

  .tip-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

解决措施 1.手动在flex里面 严格根据 ui的line-height 同步

2.不实用flex.

div{
  img，div（或者span）
}

div 外出取消flex 布局，
内部正常，需要把内部的div和span  
1.设置成 dispaly:inline-block(为了在一行 添加宽高)
2.img默认会对其底部的文字极限。所以需要给img添加 virtiacl-aligin:top；
3.计算img的高度 和外层 div的总高度。计算差距 平分上下，写margin-top：xxx

标签：flex,img,height,左面,div,font,line,css
来源： https://www.cnblogs.com/xnblog/p/15186636.html