摘要:安卓文本無法垂直居中的問題問題安卓的字體大小在小于像素的時候無法使用行高來垂直居中目前在微信等應用都存在該問題,而在最新的移動端瀏覽器上無該問題截止本文編寫時間,微信客戶端的版本為,版本為。
安卓文本無法垂直居中的問題 問題
安卓 webview 的字體大小在小于 12 像素的時候無法使用行高來垂直居中
ps:目前在微信等應用都存在該問題,而在最新的移動端 Chrome 瀏覽器上無該問題(截止本文編寫時間,微信客戶端的 chrome 版本為 57,chrome 版本為 70)。
嘗試方案
table 布局:文本偏上
hot 熱門
flex 布局:文本偏上
hot 熱門
transform 縮放:文本居中了,但是 transform 不能還原元素在 dom 上的占用區(qū)域大小
hot 熱門
zoom 縮放:文本偏上
hot 熱門
固定高度+內邊距+行高設定為字體大?。何谋酒?/p>
hot 熱門
固定高度+內邊距+行高設為 normal:文本偏上
hot 熱門
內邊距+行高設為 normal:文本居中,但在部分客戶端上不居中
hot 熱門
行高+字體大小設為 initial:文本居中,在最新的 Chrome 瀏覽器上不居中
解決方案hot 熱門
在不同的安卓客戶端上測試上述方法發(fā)現(xiàn)以下三個方法或許可以幫助解決居中問題,我們可以根據實際客戶端的支持情況來選擇其中一種方式來解決無法居中問題。
transform 縮放
hot 熱門
內邊距+行高設為 normal
hot 熱門
行高+字體大小設為 initial
參考文獻hot 熱門
Android 瀏覽器文本垂直居中問題
解決 Android 瀏覽器下 line-height 垂直居中偏離問題
移動端android上line-height不居中的問題
完美解決移動Web小于12px文字居中的問題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114247.html
摘要:前言本文主要探索在安卓系統(tǒng)下瀏覽器中小字號中文居中的實現(xiàn)以及在混排時的對齊處理。神奇的安卓字體根據所述,文字中從小到大可以劃出三個區(qū)域,分別是,和。但是,部分安卓機器字體的字形不居中于,卻居中于。 前言 本文主要探索在安卓系統(tǒng)下瀏覽器中小字號中文居中的實現(xiàn)以及在混排時的對齊處理。本文是受《Deep dive CSS: font metrics, line-height and vert...
摘要:最近開發(fā)移動端,發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好,網上也搜了很多方法,但是都比較麻煩,自己摸索出來了最終的解決方案首先在頭部把我們常用的改為。 最近開發(fā)移動端APP,發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好,網上也搜了很多方法,但是都比較麻煩,自己摸索出來了最終的解決方案: 1、首先在html頭部把我們常用的lang=en改為lang=zh-cmn-Hans。 此設置...
摘要:最近開發(fā)移動端,發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好,網上也搜了很多方法,但是都比較麻煩,自己摸索出來了最終的解決方案首先在頭部把我們常用的改為。 最近開發(fā)移動端APP,發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好,網上也搜了很多方法,但是都比較麻煩,自己摸索出來了最終的解決方案: 1、首先在html頭部把我們常用的lang=en改為lang=zh-cmn-Hans。 此設置...
閱讀 2619·2021-10-12 10:12
閱讀 778·2019-08-29 17:25
閱讀 2780·2019-08-29 17:24
閱讀 3204·2019-08-29 17:19
閱讀 1792·2019-08-29 15:39
閱讀 3031·2019-08-26 16:50
閱讀 1983·2019-08-26 12:17
閱讀 2694·2019-08-26 12:16