文章詳情頁
移動端頁面文字垂直居中兼容性問題
瀏覽:143日期:2024-05-25 15:25:31
問題描述
第1張圖是chrome模擬器里的效果。第2、3張圖是兩臺手機(jī)里的效果。第4張圖是按鈕的樣式。
按鈕的高度和行高相等,文字應(yīng)該垂直居中。第1張圖chrome模擬器中是正確的,第2張圖中的效果也基本正常,但第3張圖中的文字明顯偏上了。單位試過 rem,也試過 px,都會存在這種情況。有沒有人能分析一下問題的原因?有沒有完全兼容的解決方案?
明確一下我的問題:一行文字,在該行垂直方向居中,PC端正常,移動端有的正常,但有的沒有垂直居中,這個問題是怎么產(chǎn)生的,有沒有解決方案?
默認(rèn)長寬字體大小先擴(kuò)大為兩倍,再用 scale 縮小為一半大小后的結(jié)果,效果確實好了一點,但感覺還是有一點點偏上。
問題解答
回答1:我也遇到了這個問題,原本用< a >標(biāo)簽寫的按鈕,后來改用button就好了。給個高度,不用寫行高,自動垂直居中。
回答2:目前比較有效的解決方法就是transform,放大一倍再縮小一半,但是寫起來繁瑣而且影響布局。我也想知道有沒有什么既好又方便的方法
回答3:今天這個問題也糾結(jié)了研究了好久,安卓機(jī)下表現(xiàn)異常,PC、蘋果機(jī)表現(xiàn)良好,如果一般情況,用margin偏移量來對齊,極端情況還是transform絕對定位居中比較靠譜。
相關(guān)文章:
1. mysql - 如何減少使用或者不用LEFT JOIN查詢?2. python - Scrapy存在內(nèi)存泄漏的問題。3. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里?4. python - 我在使用pip install -r requirements.txt下載時,為什么部分能下載,部分不能下載5. 視頻文件不能播放,怎么辦?6. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處7. mysql - jdbc的問題8. html5 - H5 audio 微信端 在IOS上不能播放音樂9. python - 編碼問題求助10. mysql - 千萬級數(shù)據(jù)的表,添加unique約束,insert會不會很慢?
排行榜

熱門標(biāo)簽