参考原理:https://www.jianshu.com/p/dea069fecb62
实现手机页面的一个分享链接,只要实现分享图标和分享文字的对齐
//html
<div class="n-h-share">
<div class="i-h-contText"> <a href="">分享</a>
</div>
<div class="i-h-shareImg"><img src="../img/share.png" alt="分享"></div>
</div>
//css
.n-h-share {
float: right;
width: 1.5rem;
height: 0.5rem;
text-align: center;
padding: 0 0.15rem;
border-radius: 0.5rem;
background-color: #2f87ff;
}
.i-h-contText {
width: 0.7rem;
height: 0.5rem;
float: left;
margin-left: 0.045rem;
}
.i-h-contText>a {
font-size: 0.28rem;
color: #fff;
text-align: center;
line-height: 0.5rem;
vertical-align: middle;
}
.i-h-shareImg {
float: left;
width: 0.35rem;
height: 0.5rem;
display: flex;
align-items: center;
}
.i-h-shareImg>img {
width: 0.3rem;
height: 0.3rem;
}