recently encountered this problem while working on a mobile page.
at that time, I "carefully" designed a floating div, of the text container element and made it height = line height = font size = 14px, and gave the margin-top. of 1px. Because the height of the parent node is 16px, I naively think that the text container element is centered above and below the and text. Since the following icon container height = parent node height 16px, both the text and the icon are centered vertically.
but I never expected that during the test, on the Wechat browser of android, the user name text in the message area would "pop up" 1px up, resulting in the text not on the same level as the icon. And it is normal to perform on ios.
in order to reproduce the problem, I tested the page on pc and found that the text in the firefox browser also popped up 1px, while it was normal on the chorome.
firefox:
chrome:
html Code:
<div class="msg_item_name">
<div class="name">1</div> <!---->
<span class="tag_teacher"></span> <!--icon-->
</div>css Code:
.article-detail .msg_item_name{ /**/
margin: 0 0.96rem;
font-family: "PingFangSC-Medium", "Microsoft Yahei";
letter-spacing: 0.2px;
font-size: 14px;
height: 16px;
line-height: 16px;
color:-sharp1a1a1a;
overflow: hidden;
background:yellow;
}
.article-detail .msg_item_name .name{/**/
margin-top: 1px;
float: left;
height: 14px;
line-height: 14px;
}
.article-detail .tag_teacher{ /*icon*/
float: left;
margin: 0 0 0 0.0666667rem;
width: 44px /*1.17333rem*/;
height: 100%;
background: url(./images/teacher/icon_teacher3@3x.png) center no-repeat;
background-size: 100% 100%;
}therefore, I would like to ask you how to solve this problem? Or is there a better implementation method for similar scenes with pictures and text centered side by side? Due to my limited experience, I have tried many ways to solve this problem. I hope you will not hesitate to give me advice!