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
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;
}