微信小程序 Android 端文字垂直居中 bug

[pheyer]

<button class="test">测试</button>
<style>
.test{
    color: #c4181f;
    font-size: 24rpx;
    line-height:24rpx;
    border: 1rpx solid #c4181f;
    border-radius: 10rpx;
    padding: 10rpx;
}
</style>

上面的代码在 iOS 上面显示垂直居中显示没有问题，但是在 Android 上就会偏上一点显示 根据 http://www.tonjay.com/416.html 应该是 Android webview 的 bug，也影响到了安卓小程序端，试过了文中的方法，感觉没什么用，你们都是怎么解决的，还是不管它？

[imwalson]

高度和 font-size 都设置为现在的两倍大，然后再整个缩小 50%就可以解决

[pheyer]

@imwalson 居然没有你回复消息的提醒。。。两倍大的问题是容器高度也变大了，这可怎么办

[imwalson]

@pheyer 就是对整个容器应用缩放，因为容器整个变大了，字体、内边距和圆角大小全部变为两倍，对容器整个缩小才能达到效果

[pheyer]

@imwalson 可是我发现把所有 rpx 值都扩大为原来的两倍，Android 上的居中效果仍然是偏上的，css 样式如下：
.color-box {
position:absolute;
display: inline-block;
left: 20rpx;
top: 20rpx;
border-radius:5rpx;
border: 2rpx solid #BEAF85;
background: #EAE6D7;
font-size: 40rpx;
padding: 8rpx 16rpx;
color: #BEAF85;
}

40rpx 的字体 size 肯定能保证最终字体 size>12px，看别人的文章都说字体大于 12px 就没有垂直居中偏上的问题，但是自己测试并不是这样

[az09py]

留坑，我也遇到这个问题

[imwalson]

@pheyer 试试给容器一个高度，上下 padding 去掉，然后用相同的 line-height 来居中。比如 height：60rpx;line-height: 60rpx;padding: 0 16rpx;

[ByZHkc3]

display: flex;
align-items: center;
justify-content: center;

[serge001]

height:auto;
line-height: normal;