最近在公司上班写移动端代码的时候发现了个很有意思的问题,用css写出来的按钮有时候总是莫名其妙的不居中,最奇怪的是只有在某些手机上不居中.(pc端一般不会出现问题)
height: 36upx;
line-height: 36upx;
设置行高等于高度,之前让按钮文本居中都是这样去设置的,发现出现上述问题后就一直在找原因,最后发现了影响到不居中的原因主要有以下三点,大家如果遇到相似的问题可以尝试下.
1,文字大小小于12px
2,文字大小为奇数
3.按钮高度为奇数
如果还不能解决问题,可以尝试设置line-height等于文字的大小,然后用span之类的标签把文字包裹起来,用弹性布局让文字居中.
display: flex;
align-items: center;
justify-content: center;