android中 css 文字垂直居中
前言
经常有android手机出现 文字垂直不居中的情况,因此做个简单记录
原因
这个问题是因为Android的文字在content-area内部渲染的时候已经偏移了,而css的居中方案都是控制的整个content-area的居中。导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看font-family
里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体
以下是我的实现方式,虽然还是仍有不兼容,但我已测试大多数手机可以,区分ios和android
实现
.vote-btn {
// ios默认保持当前样式
height: 0.32rem;
line-height: .32rem;
border-radius: 0.16rem;
color: #fff;
font-family: PingFangSC-Regular, PingFang SC;
background: #FF6D3D;
font-size: 0.2rem;
font-weight: 400;
padding: 0 .12rem;
&.android { // android再加样式处理
font-family: monospace; // 使用内置等宽字体样式
box-sizing: border-box;
border: 1px solid transparent;
}
}
其他的如以下情况,均有不兼容情况
.tag{
display:flex;
align:center;
justify: center;
}
.tag{
height: 20px;
line-height: 20px
}
扩展交流
如有其他方式,欢迎评论,不喜勿喷,感谢各位大佬