在寫手機(jī)端的頁面的時(shí)候 有時(shí)候發(fā)現(xiàn)在使用line-height居中的方法 在安卓機(jī)上顯示不正常的 會(huì)往上移2px左右工三!于是查資料發(fā)現(xiàn)了比較靠譜的2種解決方式 蛹头。
第一種专甩,改變字體大小 最直接的方法就是改變字體大小讓它大于 12px 能夠正常居中,如果頁面對(duì)字體大小要求比較嚴(yán)格的話辆憔,可以先將原來包括 font-size 在內(nèi)的屬性放大兩倍撇眯,再用 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;
}
補(bǔ)充:寫這個(gè)的時(shí)候 最好用上外邊距 這樣寫過會(huì)更好看一些叛本!
轉(zhuǎn)載原文地址: http://blog.csdn.net/jjx0224/article/details/53813542
如果各位大神有更好的方法沪蓬,請(qǐng)多指教彤钟!