手机上line-height不起作用

xiaoxiao2021-02-28  173

android的webview中,line-height的垂直居中 对于字体小于12px的无效,主要是因为避免奇数font-size带来的偏差,设置成了偶数,所有会有一些偏上 解决办法:

1. 改变字体大小 最直接的方法就是改变字体大小让它大于 12px 能够正常居中,如果页面对字体大小要求比较严格的话,可以先将原来包括 font-size 在内的属性放大两倍,再用 scale 缩小一倍,这样测试之后也是可行的:

<span class="content">Jason」</span> .content {     display: inline-block;     height: 40px;     background-color: gray;     line-height: 40px;     font-size: 20px;     transform: scale(0.5);     transform-origin: 0% 0%; }

2. table布局 在元素外再包一层,使用表格布局

<div class="container">     <span class="content">Jason's Word</span> </div> .container {     display: table; } .content {     background-color: gray;     font-size: 10px;     display: table-cell;     vertical-align: middle; }
转载请注明原文地址: https://www.6miu.com/read-26425.html

最新回复(0)