line-height安卓中不垂直居中

知更鸟
知更鸟
站长
2322
文章
0
粉丝
Web前端评论1,202阅读模式

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安卓对line-height兼容有问题。

办法一

父容器不要设置高度,line-height不设置具体数值,通过padding调整内边框。

line-height: normol;
padding: 8px 0;
display:inline-block;

方法二

把字体大小、定位、间距、高度和边框线整体都放大2倍,然后再缩小一倍:

transform: scale(0.5);
transform-origin: 0 0;

个人推荐方法一。

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证