Android中line-height不居中的解決辦法
阿新 • • 發佈:2019-01-01
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;
}