移动端字体的垂直居中问题解决

时间：2024-04-06 16:46:26

最近公司为了工作需要，所以在好分数服务号上给家长提供辅导基本信息，所以我又开始了移动端web的开发。在开发过程中遇到了一些样式问题，作为一个有追求的前端，当然是尽最大努力解决掉它们，力求完美的用户体验，这其中花费时间最多的就是那个字体垂直居中问题。

首先描述问题

我这次迭代负责的模块，在页面头部是一个表示年月的文案，文案两边是有箭头图标背景的按钮，我这行文案的line-heignt为容器高度，箭头图标的居中显示：

.month-picker {
   width: 3rem;
   height: 0.8rem;
   margin: 0 auto;
   font-size: 0.32rem;
   line-height: 0.8rem;
   color: #766864;
   text-align: center;
   .header-icon {
       height: 0.8rem;
       .header-icon-inner {
           width: 100%;
           height: 100%;
       }
   }
   .icon-left {
       background: url(../../assets/images/common/[email protected]2x.png) center center no-repeat;
       background-size: 0.13rem 0.25rem;
   }
   .icon-right {
       background: url(../../assets/images/common/[email protected]2x.png) center center no-repeat;
       background-size: 0.13rem 0.25rem;
   }
}

这都是一些常规操作，在电脑上的chrome浏览器模拟手机显示时也还算正常但是在真机自测时就有点纠结了，因为这行字和图标对不齐（本人是安卓手机）：
移动端字体的垂直居中问题解决这么明显的一个样式问题让我怎么能忍，但是这些代码又是常规操作了，没办法就在百度上查一下，上网一查才知道原来大部分人都遇见过这问题，而解释及解决方案也是五花八门，基于在解决问题的同时学习到更多技能的目的，我就开始了探索之旅。

探索过程

首先尝试方案一：使用固定字体大小
网上有人说，出现这个问题的原因是因为安卓系统在设置字体大小方面能设置的最小字体是12px，再加上使用了rem自动调节字号大小，浏览器在设置大小时存在精度丢失的问题，所以建议字体字号最小为12px，这就使想到了某兼职平台的移动端web页面就完全用的px布局，因为有这个先例所以我就考虑尝试这个方法（尽管我觉得这个方法不行）。代码如下（效果图在下方）：

.demo-px {
    width: 120px;
    height: 46px;
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
    div {
        float: left;
    }
    .header-icon {
        width: 10px;
        height: 100%;
    }
    .current-month {
        width: 100px;
        height: 46px;
        font-size: 20px;
        text-align: center;
        line-height: 46px;
    }
    .icon-left {
        background: url(../assets/images/common/[email protected]2x.png) center center no-repeat;
        background-size: 0.13rem 0.25rem;
    }
    .icon-right {
        background: url(../assets/images/common/[email protected]2x.png) center center no-repeat;
        background-size: 0.13rem 0.25rem;
    }
}

果然不起效果（为了优化用户体验，尺寸有微调），而且我又仔细看了那个平台的项目，觉得也是有这个问题，所以这个方案不成功。
查看不同字号在浏览器里的表现
有些大佬的回答是line-height在android浏览器的实现很垃圾，用这个属性往往不能让字体垂直居中，所以我就看了一下是不是这样（效果图如下）：

.demo-line {
    width: 5rem;
    height: 0.8rem;
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
    .current-month {
        float: left;
        width: 2rem;
        height: 0.8rem;
        font-size: 0.28rem;
        text-align: center;
        .font-size-small {
            font-size: 0.28rem;
        }
        .font-size-big {
            font-size: 0.32rem;
        }
    }
}

很奇怪，不同字号在浏览器里的表现是不一样的（这是后期总结的时候偶然发现的，一开始用的字号是第一种，所以那时以为所有字号的字体都会向上移），前一个文字整体向上移，因此我觉得个问题应该是android浏览器的一个bug，对于某些字号的文字，它的位置与所占空间不匹配。既然找到问题所在就要着手去解决它。
解决方案一：使用flex布局
根据网上的提示我觉得只有一种方法可以使用，那就是设置好合适的字体大小，然后使用flex布局就可以解决了，因为flex布局很简单，所以具体代码就不放出来了，另外尽管在使用合适字体的情况下，使用line-height也是不成功的。
解决方案二：将line-height的值设置得比height大
由于一开始我用的字号有问题，我在网上查到的方案都无效所以就只能再去请教百度了，这次我是用手机和电脑模拟移动端设备打开同一个域名，然后在手机看字体垂直居中的样式效果，看哪些元素看起来是居中的，然后再用电脑查看那个元素的样式属性。通过这种方式我就发现在这些元素中，百度的处理方式是将line-height的值设置得比height大了0.1rem，百度通过这种非常规的写法弥补了正常行高情况下字体上移的问题，所以在项目中我也是用这种办法。
另，网上还说了可以将父元素设置display: table; 给子元素设置display: table-cell;也可以解决这个问题，我对这个属性不太熟，所以通过这个方案没实现。
效果图如下：
移动端字体的垂直居中问题解决

总结

根据我的观察，移动端行高问题在很多网站都存在，而这个问题的根源是设备问题，使用方案一、方案二都不是非常完美，我觉得最完美解决方案是，不使用那些可能会出现问题的字号。

相关文章