利用vertical-align:middle實現垂直居中
阿新 • • 發佈:2021-02-10
參考原理: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;
}