移动端Android中font-size小于12px时line-height不居中

作者: MJ 分类: html 发布时间: 2019-06-11 15:17

解决办法:

办法一

由于出现的场景是字体小于12px的时候,所以可以将原来包括 font-size 在内的属性放大两倍,再用 scale 缩小一倍
<p>标签</p>
p{
    font-size:20px;
    background: #f00;
    color:#fff;
    height:40px;
    line-height: 40px;
    display: inline-block;
    border-radius: 8px;
    transform: scale(0.5);
    padding:0 10px;
}

办法二

table布局 在元素外再包一层,使用表格布局
<div class="parent">
    <p class="child">标签</p>
</div>
.parent{
    display: table;
}
.child{
    font-size:10px;
    background: #ccc;
    display: table-cell;
    vertical-align: middle;
}

https://www.jianshu.com/p/c079c0b49ddb

http://www.fly63.com/article/detial/399?type=1

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注