文字偏上緣由總結

設置line-height等於height使文字居中， 在移動端會出現文字偏上的問題，緣由可能有如下幾個。

1. 文字小於12px，解決辦法有兩個。

• 使用transform，把文字放大到比12px大的大小

<style>
.content {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}
</style>
<span class="content">testtesttesttesttest</span>

這種方法在部分機型可能出現兼容問題。

• 使用table-cell佈局

<style>
.container {
    display: table;
}
.content {
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}
</style>
<div class="container">
    <span class="content">testtesttesttesttest</span>
</div>

這種方法兼容性好，就是得多加一層容器。

2.font-size爲奇數的緣由。

若是一個行高爲20px的文字是15px，可能出現上下空間分配不均的問題，尤爲是沒有解決1px border問題時，這種狀況可能會更加明顯，這裏建議使用淘寶的lib-flexible方案。

參考目錄

http://imweb.io/topic/5848d0fc9be501ba17b10a94
http://dobit.top/Detail/243.html