The Problem that Android Text Can't Center Vertically

problem

Android webview font size less than 12 pixels can not use line height to center vertically

ps: At present, this problem exists in applications such as Wechat, but it does not exist in the latest mobile Chrome browser (as of the writing time of this article, the chrome version of Wechat client is 57, and the chrome version is 70).

Trial scheme

1. table layout: on the top of the text

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

2. flex layout: top of text

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

3. Transform scaling: The text is in the middle, but transform cannot restore the size of the area occupied by the element on the 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 Popular</span>
   </div>

4. Zoom zoom: on the top of the text

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

5. Fixed Height + Inside Margin + Line Height Set to Font Size: Upside of Text

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

6. Fixed Height + Inside Margin + Line Height Set to normal: Text Above

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

7. Inside margin + line height set to normal: text centered, but not in some clients

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

8. Line height + font size set to initial: text in the middle, and on the latest Chrome browser in the middle

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

Solution

Testing the above methods on different Android clients shows that the following three methods may help solve the problem of centralization. We can choose one of them to solve the problem of non-centralization according to the support of the actual client.

1. transform zoom

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

2. Inside margin + row height set to normal

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

3. Line height + font size set to initial

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

Reference

• Vertical Centralization of Android Browser Text
• Solve the problem of line-height vertical center deviation in Android browser
• line-height in Mobile android
• Perfect Solution to the Problem of Mobile Web Less than 12px Text Centralization