您的位置：首页 > 其它

字体小于12px，在魅族，锤子等有些手机上，不能上下居中显示的解决办法

2020-02-29 21:50 423 查看

实现思路： 根据CSS3的scale属性，先把目标的属性放大两倍，再用scale(0.5)整体缩小两倍。记得外层套个标签，方便定位。
效果图：

全部代码如下：

<!DOCTYPE html>
<html class="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>字体小于12px</title>
<style type="text/css">
.xs_font{
position: relative;
display: inline-block;
}
.xs_font .first_line{
font-size: 14px;
}
.xs_font .second_line{
background: lightpink;
display: block;
margin: 0 auto;
width: 60px;
height: 30px;
}
/* 主要代码 */
.xs_font .second_line span{
display: block;
width: 120px;
font-size: 20px;
height: 60px;
line-height: 60px;
text-align: center;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
</style>
</head>
<body>
<div class="xs_font">
<div class="first_line">
第一行文本字体14px
</div>
<div class="second_line">
<span>字体10px</span>
</div>
</div>
</body>
</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
小排骨zzz 发布了3 篇原创文章 · 获赞 0 · 访问量 82 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航