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

This topic created in 2964 days ago, the information mentioned may be changed or developed.

<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，也影响到了安卓小程序端，试过了文中的方法，感觉没什么用，你们都是怎么解决的，还是不管它？

8 replies • 2020-04-23 13:56:50 +08:00

imwalson

Apr 18, 2018 via Android

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

pheyer

Apr 19, 2018

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

imwalson

Apr 19, 2018 via Android

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

pheyer

Apr 19, 2018

@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

Apr 19, 2018

留坑，我也遇到这个问题

imwalson

Apr 20, 2018 via Android

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

ByZHkc3

Sep 20, 2019

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

serge001

Apr 23, 2020

height:auto;
line-height: normal;