今天的一個偶然機會,看到了一個解決當在安卓移動端的時候,字體小於12號字的時候,line-height設置不能居中的問題。解決方案也很簡單,就是在頁面中的html標籤中, 添加上lang屬性,並且設置爲'zh-cmn-hans' 請看下面的代碼:
1 <html lang="zh-cmn-hans">
然後我自己測試了以下,確實可以。大家可以自己測試一下。不過需要注意的一點是,需要在安卓真機上查看
1 <!DOCTYPE html> 2 <html lang="zh-cmn-hans"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <style type="text/css"> 8 .box{ 9 width: 100px; 10 height: 100px; 11 background: red; 12 transition: all 1s ease-in-out; 13 } 14 .big{ 15 width: 200px; 16 height: 400px; 17 background: yellow; 18 } 19 .centerDiv{ 20 width: 150px; 21 text-align: center; 22 background: #808080; 23 color: #FFF; 24 height: 14px; 25 border-radius: 20px; 26 margin-top:10px; 27 font-size: 10px; 28 line-height: 14px; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="box"> 34 35 </div> 36 <div class="centerDiv"> 37 一段中文文字 38 </div> 39 <div class="centerDiv"> 40 some English 41 </div> 42 </body> 43 </html>
第二行的代碼,大家自己註釋掉,然後看移動端的展示效果。下面請看我的截圖
這個是設置了這個屬性的:
下面的截圖是沒有設置的: