<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,也影响到了安卓小程序端,试过了文中的方法,感觉没什么用,你们都是怎么解决的,还是不管它?
1
imwalson 2018-04-18 20:11:32 +08:00 via Android
高度和 font-size 都设置为现在的两倍大,然后再整个缩小 50%就可以解决
|
3
imwalson 2018-04-19 09:42:24 +08:00 via Android
@pheyer 就是对整个容器应用缩放,因为容器整个变大了,字体、内边距和圆角大小全部变为两倍,对容器整个缩小才能达到效果
|
4
pheyer OP @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 就没有垂直居中偏上的问题,但是自己测试并不是这样 |
5
az09py 2018-04-19 11:09:51 +08:00
留坑,我也遇到这个问题
|
6
imwalson 2018-04-20 07:51:07 +08:00 via Android
@pheyer 试试给容器一个高度,上下 padding 去掉,然后用相同的 line-height 来居中。比如 height:60rpx;line-height: 60rpx;padding: 0 16rpx;
|
7
ByZHkc3 2019-09-20 12:08:59 +08:00
display: flex;
align-items: center; justify-content: center; |
8
serge001 2020-04-23 13:56:50 +08:00
height:auto;
line-height: normal; |