热门关键字:
jquery > jquery教程 > jquery教程 > 文字居中兼容

文字居中兼容

264
作者:管理员
发布时间:2020/9/29 9:27:16
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=2652

正常处理文字上下居中的手段是让元素height和line-height相等,但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。

解决方法:

  1. 判断系统环境(安卓/IOS)分别作微调;
  2. font-size、height、width全部放大为2倍,利用transform进行缩放
height: 1rem;
width: 2rem;font-size: 0.5rem;变成:height: 2rem;width: 4rem;font-size: 1rem;transform: scale(0.5);

但由于放大之后占据空间,左右会留白,需要利用margin负值 margin: -0.35rem -0.45rem 0;调整





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:css
友荐云推荐