关于移动端文字没法垂直居中（或line-height不起做用）的问题的解决方案

时间 2019-11-10

标签关于移动文字没法垂直居中 line height 不起问题解决方案栏目无线繁體版

原文原文链接

最近开发移动端APP，发现安卓端对于文字垂直居中的问题兼容性很差，网上也搜了不少方法，可是都比较麻烦，本身摸索出来了最终的解决方案：html

一、首先在html头部把咱们经常使用的lang="en"改成lang="zh-cmn-Hans"。app

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

此设置会致使安卓端和iOS端的密码输入符会出现问题：字体

iOS端：（密码符号变大）spa

安卓端：（密码符号变小）3d

咱们能够对须要密码框的页面单独使用lang="en"的设置。code

二、其次将<body>中的font-family中设置的文字样式只保留如下两个：htm

font-family: -apple-system-font, sans-serif;

并将 Helvetica,Arial等字体删除，这些字体是形成安卓端文字没法垂直居中的主要缘由。
固然删除这些字体会带来页面中的数字会发生变化：blog

这是不设置Helvetica等字体的数字样式：
图片

这是设置了Helvetica等字体的数字样式：
开发

所以咱们若要处理一些重要的数字时，能够单独对其设置字体样式。

最后附上按照个人方法处理先后的两张截图：

处理前：

处理后：

处理后，个人积分和签到 +5积分均处于垂直居中状态。

PS:此方法并不能解决移动端font-size小于12px如下出现的不能垂直居中问题。可能还须要各位用其它方式来解决。