移动端android上line-height不居中的问题

文章2017-03-149,803 人已阅来源：TONJAY-原创

2019-04-11编辑

本篇文章的方法都不是拿来即用的，是提供一个解决方法的方向。因为需求都不一致，根据自己的需求，慢慢的从以下几点来调试，相信问题总会解决的。

最近发现了一个方法，尝试之下还是很有效果的。唯一值得注意的地方就是line-height值务必设置成normal。

下图为我在安卓微信端的演示，大家可以在桌面浏览器中看一下效果。但是移动端中英文字母有明显的差异，个中情况请自个慢慢体会。

移动端android上line-height不居中的问题

下面为演示代码：

运行代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table</title></head>
  <style>* { font-family: -apple-system, SF UI Text, PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; margin: 0; padding: 0; border-collapse: collapse; list-style: none; }</style>
  <body style="text-align: center;">
    <p>font-size: 8px;</p>
    <div style="font-size: 8px; line-height:normal; padding: 2px 10px; background: #f33; color: #fff; display: inline-block; border-radius: 100px;">前端资源</div>
    <div style="font-size: 8px; line-height:normal; padding: 1px 10px; border: 1px solid; box-sizing:border-box; color:#f33; display: inline-block; border-radius: 100px;">边框演示</div>
    <div style="font-size: 8px; line-height:15px; padding: 0 10px; background: #f33; color: #fff; display: inline-block; border-radius: 100px;">TONJAY</div>
    <br>
    <br>
    <br>
    <p>font-size: 9px;</p>
    <div style="font-size: 9px; line-height:normal; padding: 2px 10px; background: #f33; color: #fff; display: inline-block; border-radius: 100px;">前端资源</div>
    <div style="font-size: 9px; line-height:normal; padding: 1px 10px; border: 1px solid; box-sizing:border-box; color:#f33; display: inline-block; border-radius: 100px;">边框演示</div>
    <div style="font-size: 9px; line-height:17px; padding: 0 10px; background: #f33; color: #fff; display: inline-block; border-radius: 100px;">TONJAY</div>
    <br>
    <br>
    <br>
    <p>font-size: 10px;</p>
    <div style="font-size: 10px; line-height:normal; padding: 2px 10px; background: #f33; color: #fff; display: inline-block; border-radius: 100px;">前端资源</div>
    <div style="font-size: 10px; line-height:normal; padding: 1px 10px; border: 1px solid; box-sizing:border-box; color:#f33; display: inline-block; border-radius: 100px;">边框演示</div>
    <div style="font-size: 10px; line-height:18px; padding: 0 10px; background: #f33; color: #fff; display: inline-block; border-radius: 100px;">TONJAY</div></body>
</html>

之前的文章解决方法依然可以尝试并解决

作为一个强迫症患者，估计你应该是哭着找到这篇文章的。没办法，正常的写法，目前安卓上line-height属性就是不居中。很多你感觉非常居中的按钮，那些都是较大的按钮，略微有个两三像素的差距是看不出来的。你若不信，可以截图下，在ps里量一下就明白了。

下面可以先看看两张图（可以右键在新标签中打开大图）：

移动端android上line-height不居中的问题

左图中的字号是12px，右图中的行高是26px。

仔细观察过上图后，闲话少扯，直接说说我对这个android上line-height问题的一些看法：

字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
尽量不要使用rem或者em的单位，除非你能对字号的把握在每个手机上都能达到第1条的要求。别外，微信小程序上的rpx是动态计算的，可以单独针对这部分使用px。
一般只要不是边框贴着文字，一般都还看得过去，在接受的范围之内。如果是边框贴着文字，就是居中了，也不好看啊。

那么，对于小于12像素的居中或者是对居中要求很是严格的需求，这个问题怎么解决？

把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。只能针对单个或者是一排的布局进行缩放，如果是父级自适应高度且可展示多行的，使用transform是有问题的。因为transform缩放是不影响页面布局的。
把字号内外边距等设置为需求大小的2倍，使用zoom进行缩放，可以完美解决。zoom原本只有ie支持，但现在除了Firefox，都已经支持了。是的，Firefox不支持。

网上也这样的解决方法：把line-height设置为0，使用padding值把元素撑开，说是可以完美解决。

经过测试，没有用的！

另外，给大这看一下我在项目中实现的效果，基本可以完全接受（font-size:12px; line-height:24px;）：

移动端android上line-height不居中的问题

此文为Tonjay原创，转载保留相关信息。

AIHX

移动端android上line-height不居中的问题

2019-04-11编辑

之前的文章解决方法依然可以尝试并解决

相关内容