zoukankan      html  css  js  c++  java
  • 移动端 lineheight 文字不居中问题解决方案

    在移动端中使用 line-height=容器高度 实现文字垂直居中时,在安卓手机会发现文字偏上的问题。小编总结了两个比较合理且简单的解决方案;

    上效果图

    从以上的效果图中,能感觉到 “按钮三”的文字会有轻微的向上偏移的问题(不同字号和浏览器的偏移大小不同)。

    小编觉得 flex 方案 和 padding 方案较为简单与合理,下面是源码。源码中有优缺点和特殊属性的说明;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示DEMO</title>
    <style type="text/css">
    /* 按钮基础样式 */
    .btn{
    height: 32px;

    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    120px;
    }
    /* 水平线样式 */
    hr{
    height: 0;
    border: none;
    border-top: #ddd solid 1px;
    margin: 10px;
    }
    /* flex 方案 */
    .flex{
    line-height: normal; /* 重点:设置内容行高为 normal */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center
    }
    /* padding 方案 */
    .padding{
    line-height: normal; /* 重点:设置内容行高为 normal */
    height: auto; /* 重点:设置容器高度为 auto */
    padding: 7px 0; /* 填写一个与设计稿相近的值,不如 flex 方案精确,但是更为简单,非强制要求下可以使用 */
    }
    </style>
    </head>

    <body>
    <div class="btn flex">按钮一</div>
    <hr>
    <div class="btn padding">按钮二</div>
    <hr>
    <div class="btn" style="line-height: 32px;">按钮三</div>
    </body>
    </html>

    ————————————————
    版权声明:本文为CSDN博主「黄河爱浪」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/u013350495/article/details/112428144

    漫思
  • 相关阅读:
    SAP常用Tcode汇总
    SAP物料管理标准报表
    Linux系统将大量的图片合成.gif
    fluent对网格进行透明显示
    fluent计算结果进行镜像显示
    Fluent显示中间截面附近的颗粒
    fluent提取壁面上一条线上的冲蚀磨损量
    cfdemSolverPisoScalar和cfdemSolverPisoSTM的区别
    paraview处理fluent 2020R2计算结果
    关于fluent中的压力(二)和(三)
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/15455916.html
Copyright © 2011-2022 走看看