关于line-height居中的兼容性问题

Question

问一个问题 为什么 我在苹果手机和浏览器还有一个android上面设置line-height可以 居中 但是换了其他测试机偏差很大呢

Answer 1

移动端网页开发中，经常会涉及到一些小按钮或者小标签，比如这种：

对于一般 PC 浏览器以及 iOS 设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离，如下图所示：

测试表明，字体字号为奇数的两倍时（比如 10px、14px、18px、22px、26px），会出现严重偏移现象。

其实系统之间效果的差异跟我们的字体类型、系统排版引擎、浏览器都有关系，其实不影响用户浏览与操作等体验，我们可以忽略这些问题，对于一些居于使用场景偏离的比较明显的，可以使用下面提到的两种处理方案。

方案一：

我们可以通过 transform: scale 来处理，比如，字体大小是 8px，我们把字体设定为 16px，然后通过 scale(0.5) 缩放至一倍大小，简单粗暴。

注意：放大两倍会使得容器被撑开占位。

方案二：

结合行高、对齐的关系，结合伪元素得出的黑科技，亲测效果很理想。

.jd::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin-top: 1px;
}

答案来源：

https://github.com/o2team/H5Skills/issues/4

Answer 2

在部分android的手机中会出现使用line-height文字偏上的问题，可利用padding来实现文字垂直居中，若元素高30px element{font-size: 13px; line-height:0; padding: 15px 0;//相当于line-height 30px }