关于rem单位字体的移动端按钮文字垂直居中

<div class="add">
     <span class="btn">添加</span>
</div>
.add{
    height: 0.5rem;
    display: flex;
    align-items: center;
}
.btn{
    display: inline-block;
    color: #FF8727;
    line-height: normal;
    font-size: 0.14rem;
    padding: 0.02rem 0.13rem;
    border: solid #FF8727 1px;
    border-radius: 0.15rem;
    height: 0.22rem;
}

设置line-height: normal;然后设置padding撑起高度。如果文字居中还有偏差,可以再设置height,调整height实现居中,一般文字大小为0.14rem或者0.16rem自然高度为0.22rem。

猜你喜欢

转载自www.cnblogs.com/wy90s/p/10613300.html