移动端 line-height 文字不居中问题解决方案

本是古典何须时尚 2023-01-04 13:29 113阅读 0赞

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

上效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

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

小编觉得 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;
                background-color: #0089FF;
                border-radius: 16px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                width: 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>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20221119/2e25b6b8549748c68651d4758e6c0369.png
[Link 1]: https://blog.csdn.net/u013350495