.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