美文网首页
处理Android安卓line-height无法垂直居中

处理Android安卓line-height无法垂直居中

作者: Mr老朝 | 来源:发表于2019-11-12 14:47 被阅读0次

    遇到android文本无法垂直居中问题,众里寻他千百度、google,好不容易解决了

    一、常用的方式

    • 1、transform缩放
    <div class="text-box" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
      <span>文本</span>
    </div>
    
    • 文本居中了,但是transform不能还原元素在dom上的占用区域大小
    • 2、内边距+行高设为normal
    <div class="text-box" style="box-sizing: border-box; padding: 2px; line-height: normal; font-size: 10px;">
      <span>文本</span>
    </div>
    
    • 文本居中,但在部分客户端上不居中
    • 3、行高+字体大小设为initial
    <div class="solution" style="line-height: 16px; font-size: initial;">
      <span style="font-size: 10px;">文本</span>
    </div>
    
    • 文本居中,在最新的Chrome浏览器上不居中
    • 4、强行margin-top
    .text-box::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
        margin-top: 1px;
    }
    
    • 不好控制margin-top的值,而且也会影响ios端的显示效果
    • 5、flex
    .text-box {
          height: 36px;
          display: inline-flex;  /* 或者display: flex */
          align-items: center;
    }
    
    • 测试下来不垂直

    二、我的处理方式

    • flex+行高设为normal
    -            display inline-block
    +            display inline-flex
    +            align-items: center
                 height 34px;
    -            line-height: 34px;
    +            line-height: normal;
    
    • line-heightnormal会自动配置文字区域,让文字在文字区域处于居中,而自己设置line-height为其他值实现不了在各个端让文字在文字区域居中
    • flex保证了文字区域在父元素区域里面的居中

    相关文章

      网友评论

          本文标题:处理Android安卓line-height无法垂直居中

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