博客

在安卓机上使用line-height垂直居中，有时会有些许偏差，但是css完全是没有问题的。先搬运一下其他博主的分析：

http://www.fly63.com/article/detial/399?type=1

解决方案：

方法一：运用flex布局

<span class="test">{{ item.value }}</span>

.test {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 14px;
    font-size: 12px;
}

方法二：使用padding撑开

<span class="test">{{ item.value }}</span>

.test {
    /* 按照设计大小来设置 */
    padding: 5px 3px; 
    font-size: 12px;
}

方法三：改变字体大小

由于小于12px的会容易出现此问题，所以可以再设置字体时，先将字体大小设置为原来的2倍，然后通过transform缩小,不过通过此方式，高度也会变为原来的一半

<span class="test">{{ item.value }}</span>

.test {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}

方法四：运用table布局

<div class="container">
    <span class="test">{{ item.value }}</span>
</div>

.container {
    display: table;
}
.test {
    display: table-cell;
    vertical-align: middle;
    background-color: #ccc;
    font-size: 10px;
}