文章詳情頁
css如何實現圖標和文字的“絕對對齊”呢?
瀏覽:79日期:2023-06-14 14:09:32
問題描述
前端實現圖標和文字對齊有什么解決方法?我的“絕對對齊”的意思是不管是安卓設備和ios設備看著都是對齊的,最好也能實現pc上的對齊。
demo:https://jsfiddle.net/nzfbzxw6/點擊預覽
雖然我通過設置
vertical-align: -3%;
實現的對齊(在chrome上看著好好的),如果我要在手機設備上安卓,就要是另一個數值。ios可能又要設個數值(而且不同的蘋果機型也不一樣)。
對這種問題有什么更好的解決方法嗎?
-------------------------- 一個調皮的分割線 ----------------------------------------
各位前輩的方法我都試了一下,發(fā)現在安卓手機上都不好使,圖片居中是沒有問題的,但是文字(尤其是小于12px下的)卻無法居中,這可能是安卓手機bug吧...
(第一個box盒子,第二個display:inline-block,第三個background center)
問題解答
回答1:實際上不管是line-height還是用position去定位,不管你display用的什么,不同機型的顯示效果都會不一樣。
水平上的差距幾乎沒有,垂直方向上的效果會多種多樣。
遇到這種ui,我的做法是把圖片寫在::before里,用margin去定位,這樣不管右側的文案是否絕對的垂直居中,但至少圖是相對文案去定位的,是和文案對齊的。
標簽:
CSS
相關文章:
1. javascript - 求幫助 , ATOM不顯示界面!!!!2. 解決Android webview設置cookie和cookie丟失的問題3. javascript - nodejs使用mongoose連接數據庫,使用post提交表單在后臺,后臺處理后調用res.redirect()跳轉界面無效?4. html5 - HTML代碼中的文字亂碼是怎么回事?5. javascript - 能否讓vue-cli的express修改express重啟服務6. python bottle跑起來以后,定時執(zhí)行的任務為什么每次都重復(多)執(zhí)行一次?7. node.js - mac安裝mongodb第一次啟動失敗8. node.js - npm一直提示proxy有問題9. javascript - vue2.0中,$refs對象為什么用駝峰的方式獲取不到屬性?10. java - 注解上的屬性可以傳遞嗎?
排行榜
