關於移動端文字沒法垂直居中（或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如下出現的不能垂直居中問題。可能還須要各位用其它方式來解決。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。