美文网首页
Android中line-height不居中的解决办法

Android中line-height不居中的解决办法

作者: 葱头来了 | 来源:发表于2018-10-11 19:28 被阅读0次

    android的webview中,line-height的垂直居中 对于字体小于12px的无效,主要是因为避免奇数font-size带来的偏差,设置成了偶数,所有会有一些偏上。

    解决办法

    1. 改变字体大小 最直接的方法就是改变字体大小让它大于 12px 能够正常居中,如果页面对字体大小要求比较严格的话,可以先将原来包括 font-size 在内的属性放大两倍,再用 scale 缩小一倍,这样测试之后也是可行的:
    <span class="content">葱头</span>
    .content {
        display: inline-block;
        height: 40px;
        background-color: gray;
        line-height: 40px;
        font-size: 20px;
        transform: scale(0.5);
        transform-origin: 0% 0%;
    }
    
    1. table布局 在元素外再包一层,使用表格布局
    <div class="container"> 
        <span class="content">Jason's Word</span> 
    </div>
    
    .container {
        display: table;
    }
    .content {
        background-color: gray;
        font-size: 10px;
        display: table-cell;
        vertical-align: middle;
    }
    

    原文链接

    相关文章

      网友评论

          本文标题:Android中line-height不居中的解决办法

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