Pit encountered in Android vertical center

Time:2021-5-13

Pit encountered in Android vertical center

Original address: https://segmentfault.com/a/1190000021557598
Author: FW Dragon
This article starts at: think no

1. Demand

  • Use line height to center single line text vertically;
  • Use the pseudo element vertical align: middle; To center the image vertically;

2. Pits encountered

On Android phones, the text and pictures that are vertically centered with the above method are all above.

3. Problems

The essential reason for this problem may be that Android refers to the relevant properties of primyfont font (i.e. hhead ascent, hhead descent, etc.) in typesetting calculation, while the search of primyfont is based onfont-familyWhich font in fonts.xml is the first one to match, while the Chinese font in native Android has no family name, so the matching is not Chinese font, so the solution to this problem is tofont-familyTo explicitly declare Chinese in, or how to ensure that all characters are fallback to the Chinese font.

4. Solution

Add lang = “zh CN” attribute to HTML tag,The attribute value is only for Chinese pages, and other corresponding attribute values are set for foreign pages. You can view the following chestnut recurrence on Android phone:

CodePen

Reference link

  • Why does the vertical center of Android browser deviate| Zhou Qi
  • Thinking about the vertical center offset of line height text in Android