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

最新推荐文章于 2023-05-16 11:44:13 发布

黄河爱浪

最新推荐文章于 2023-05-16 11:44:13 发布

阅读量3k

点赞数 3

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/u013350495/article/details/112428144

版权

css 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

在移动端中使用 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;
            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>