手机上line-height不起作用
来源:互联网 发布:今年的网络流行语 编辑:程序博客网 时间:2024/06/07 19:05
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;
}
阅读全文
0 0
- 手机上line-height不起作用
- 手机端line-height
- 移动端line-height偏上问题
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- 【line-height】 line-height详解
- height和line-height
- height与line-height
- height vs line-height
- 第十一周 动态规划(一)
- java初学--class extends
- Unity 输出调试信息到界面
- HDOJ 2037 今年暑假不AC (最长的事件序列)
- 证明NP完全问题
- 手机上line-height不起作用
- 线程的几种状态变化
- ECMAScript基础知识
- [Android] 在代码中改控件的高度
- c++之操作符重载(二)
- spark学习起步(三)--作业提交
- 一个例子,搞定java的方法重载
- linux之redis-3.2.9.tar.gz
- [1] Centos 7.3 前奏