In Android, CSS text is vertically centered

preface

It’s not uncommon for Android phones to have text out of center, so make a quick note

why

The problem is that Android text is already offset when rendering inside the Content-Area, whereas CSS centring controls the entire content-Area. The essence of this problem may be that Android refers to the related attributes of PrimyFont (HHead Ascent, HHead Descent, etc.) during typesetting calculation. The search for primyfont is to see which font in font family is matched first in fonts.xml. However, there is no family name for Chinese fonts on native Android, so the matching font is always not Chinese fonts. But I’ve tested that most phones can tell the difference between ios and Android

implementation

.vote-btn{// ios keeps the current style by defaultheight: 0.32 rem;
  line-height:.32rem;
  border-radius: 0.16 rem;
  color: #fff;
  font-family: PingFangSC-Regular, PingFang SC;
  background: #FF6D3D;
  font-size: 0.2 rem;
  font-weight: 400;
  padding: 0 .12rem;

  &.android{// Android add stylefont-family: monospace; // Use the built-in equal-width font stylebox-sizing: border-box;
    border: 1pxsolid transparent; }}Copy the code

Others, such as the following, are incompatible

.tag{
	display:flex;
	align-items: center;
	justify-content: center;
}
Copy the code

.tag{
	height: 20px;	
	line-height: 20px
}
Copy the code

Expand the communication

If there are other ways, welcome to comment, do not like spray, thank you big guy