文章詳情頁
移動端頁面文字垂直居中兼容性問題
瀏覽:191日期:2024-05-25 15:25:31
問題描述
第1張圖是chrome模擬器里的效果。第2、3張圖是兩臺手機里的效果。第4張圖是按鈕的樣式。
按鈕的高度和行高相等,文字應該垂直居中。第1張圖chrome模擬器中是正確的,第2張圖中的效果也基本正常,但第3張圖中的文字明顯偏上了。單位試過 rem,也試過 px,都會存在這種情況。有沒有人能分析一下問題的原因?有沒有完全兼容的解決方案?
明確一下我的問題:一行文字,在該行垂直方向居中,PC端正常,移動端有的正常,但有的沒有垂直居中,這個問題是怎么產生的,有沒有解決方案?
默認長寬字體大小先擴大為兩倍,再用 scale 縮小為一半大小后的結果,效果確實好了一點,但感覺還是有一點點偏上。
問題解答
回答1:我也遇到了這個問題,原本用< a >標簽寫的按鈕,后來改用button就好了。給個高度,不用寫行高,自動垂直居中。
回答2:目前比較有效的解決方法就是transform,放大一倍再縮小一半,但是寫起來繁瑣而且影響布局。我也想知道有沒有什么既好又方便的方法
回答3:今天這個問題也糾結了研究了好久,安卓機下表現異常,PC、蘋果機表現良好,如果一般情況,用margin偏移量來對齊,極端情況還是transform絕對定位居中比較靠譜。
上一條:為什么我這一段代碼不生效下一條:關于設置obj的opacity,一直失敗
相關文章:
1. android - weex 項目createInstanceReferenceError: Vue is not defined2. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯,是什么情況?求大神指點3. PHPExcel表格導入數據庫怎么導入4. pdo 寫入到數據庫的內容為中文的時候寫入亂碼5. javascript - 如圖,百度首頁,查看源代碼為什么什么都沒有?6. vue2.0+webpack 如何使用bootstrap?7. PHP類封裝的插入數據,總是插入不成功,返回false;8. mac連接阿里云docker集群,已經卡了2天了,求問?9. 微信渠道二維碼怎么使用?10. html5 - html元素select下拉列表在原生app里面為什么不能彈框顯示?
排行榜
