CSS文字垂直居中安卓适配问题

在WebApp中,使用line-height等于height,设置文字垂直居中时,安卓渲染会出现偏上、并不居中的问题;

image.png

在ios和chrome触屏调试模式下是正确的显示模式;
解决方法是:

1、改变字体大小
.buy-btn {
              /* 
              width 
              line-height 
              height 
              font-size 
              border-radius
              都定义成2倍 再缩小为一半 最后向右平移100% 
              适配安卓渲染 垂直居中偏上的问题
              */
              width: 156px;
              text-align: center;
              background-color: @color-red;
              color: @color-white;
              border-radius: 30px;
              height: 48px;
              line-height: 48px;
              font-size: 26px;
              transform: scale(0.5);
              transform-origin: 100% 0%;
            }

但是这样会略微使文字偏下。

你可能感兴趣的:(CSS文字垂直居中安卓适配问题)