美文网首页
CSS文字垂直居中安卓适配问题

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

作者: JacobMa1996 | 来源:发表于2018-03-11 18:52 被阅读0次

    在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文字垂直居中安卓适配问题

          本文链接:https://www.haomeiwen.com/subject/afuwfftx.html