在寫手機端的頁面的時候 有時候發現在使用line-height居中的方法 在安卓機上顯示不正常的 會往上移2px左右!于是查資料發現了比較靠譜的2種解決方式 。
第一種,改變字體大小 最直接的方法就是改變字體大小讓它大于 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;
}
補充:寫這個的時候 最好用上外邊距 這樣寫過會更好看一些!
轉載原文地址: http://blog.csdn.net/jjx0224/article/details/53813542
如果各位大神有更好的方法,請多指教!