Original address: https://segmentfault.com/a/1190000021557598
Author: FW Dragon
This article starts at: think no
- 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.
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 on
font-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 to
font-familyTo explicitly declare Chinese in, or how to ensure that all characters are fallback to the Chinese font.
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:
- Why does the vertical center of Android browser deviate| Zhou Qi
- Thinking about the vertical center offset of line height text in Android