前端常見問題——安卓文本沒法垂直居中

安卓文本沒法垂直居中的問題

問題

安卓 webview 的字體大小在小於 12 像素的時候沒法使用行高來垂直居中

ps：目前在微信等應用都存在該問題，而在最新的移動端 Chrome 瀏覽器上無該問題（截止本文編寫時間，微信客戶端的 chrome 版本爲 57，chrome 版本爲 70）。

嘗試方案

1. table 佈局：文本偏上

   <div class="solution" style="display: table; height: 16px;">
     <span style=" display: table-cell; font-size: 10px; vertical-align: middle;">hot 熱門</span>
   </div>

2. flex 佈局：文本偏上

   <div class="solution" style="display: inline-flex; align-items: center; height: 16px; line-height: 1; font-size: 10px;">
     <span>hot 熱門</span>
   </div>

3. transform 縮放：文本居中了，可是 transform 不能還原元素在 dom 上的佔用區域大小

   <div class="solution" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
     <span>hot 熱門</span>
   </div>

4. zoom 縮放：文本偏上

   <div class="solution" style="height: 32px; line-height: 32px; font-size: 20px; zoom: 0.5;">
     <span>hot 熱門</span>
   </div>

5. 固定高度+內邊距+行高設定爲字體大小：文本偏上

   <div class="solution" style="box-sizing: border-box; height: 16px; padding: 3px 0; line-height: 10px; font-size: 10px;">
     <span>hot 熱門</span>
   </div>

6. 固定高度+內邊距+行高設爲 normal：文本偏上

   <div class="solution" style="box-sizing: border-box; height: 16px; padding: 3px; line-height: normal; font-size: 10px;">
     <span>hot 熱門</span>
   </div>

7. 內邊距+行高設爲 normal：文本居中，但在部分客戶端上不居中

   <div class="solution" style="box-sizing: border-box; padding: 2px; line-height: normal; font-size: 10px;">
     <span>hot 熱門</span>
   </div>

8. 行高+字體大小設爲 initial：文本居中，在最新的 Chrome 瀏覽器上不居中

   <div class="solution" style="line-height: 16px; font-size: initial;">
     <span style="font-size: 10px;">hot 熱門</span>
   </div>

解決方案

在不一樣的安卓客戶端上測試上述方法發現如下三個方法或許能夠幫助解決居中問題，咱們能夠根據實際客戶端的支持狀況來選擇其中一種方式來解決沒法居中問題。

1. transform 縮放

   <div class="solution" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
     <span>hot 熱門</span>
   </div>

2. 內邊距+行高設爲 normal

   <div class="solution" style="box-sizing: border-box; padding: 2px; line-height: normal; font-size: 10px;">
     <span>hot 熱門</span>
   </div>

3. 行高+字體大小設爲 initial

   <div class="solution" style="line-height: 16px; font-size: initial;">
     <span style="font-size: 10px;">hot 熱門</span>
   </div>

參考文獻

• Android 瀏覽器文本垂直居中問題
• 解決 Android 瀏覽器下 line-height 垂直居中偏離問題
• 移動端android上line-height不居中的問題
• 完美解決移動Web小於12px文字居中的問題