移動端頁面文字垂直居中兼容性問題
問題描述
第1張圖是chrome模擬器里的效果。第2、3張圖是兩臺手機(jī)里的效果。第4張圖是按鈕的樣式。
按鈕的高度和行高相等,文字應(yīng)該垂直居中。第1張圖chrome模擬器中是正確的,第2張圖中的效果也基本正常,但第3張圖中的文字明顯偏上了。單位試過 rem,也試過 px,都會存在這種情況。有沒有人能分析一下問題的原因?有沒有完全兼容的解決方案?
明確一下我的問題:一行文字,在該行垂直方向居中,PC端正常,移動端有的正常,但有的沒有垂直居中,這個問題是怎么產(chǎn)生的,有沒有解決方案?
默認(rèn)長寬字體大小先擴(kuò)大為兩倍,再用 scale 縮小為一半大小后的結(jié)果,效果確實(shí)好了一點(diǎn),但感覺還是有一點(diǎn)點(diǎn)偏上。
問題解答
回答1:我也遇到了這個問題,原本用< a >標(biāo)簽寫的按鈕,后來改用button就好了。給個高度,不用寫行高,自動垂直居中。
回答2:目前比較有效的解決方法就是transform,放大一倍再縮小一半,但是寫起來繁瑣而且影響布局。我也想知道有沒有什么既好又方便的方法
回答3:今天這個問題也糾結(jié)了研究了好久,安卓機(jī)下表現(xiàn)異常,PC、蘋果機(jī)表現(xiàn)良好,如果一般情況,用margin偏移量來對齊,極端情況還是transform絕對定位居中比較靠譜。
相關(guān)文章:
1. android - rxjava merge 返回Object對象數(shù)據(jù)如何緩存2. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個是怎么回事????3. angular.js - ionic2 瀏覽器跨域問題4. python - Scrapy存在內(nèi)存泄漏的問題。5. javascript - 螞蟻金服里的react Modal方法,是怎么把元素插入到頁面最后的6. mysql 一個sql 返回多個總數(shù)7. 如何用筆記本上的apache做微信開發(fā)的服務(wù)器8. docker-compose中volumes的問題9. CSS3 畫如下圖形10. java - 三位二進(jìn)制表示8進(jìn)制,四位二進(jìn)制表示16進(jìn)制,那么多少二進(jìn)制表示10進(jìn)制呢?
