小程序，line-height 无法垂直居中，感觉文字往下偏移

Question

小程序页面需要一个简单的button按钮，一行文字，高度为54px，代码，感觉文字上面的空白比下面多6px 左右。于是用 view 模拟着写了一个垂直居中伪代码，发现一样的问题，这是为什么呢？

代码如下：

<view style="border-radius: 10px; height: 54px; line-height: 54px; text-align: center; background: #0b863c; color: #fff;">拨打电话</view>

效果如如下（Markman 放大后测量效果）？

Answer 1

这个和字体有关，好像没什么特别好的办法解决。

Answer 2

这样写

<div style='设置高度和行高，但是不要设置字体'>
    <span style='设置字体'>拨打电话</span>
</div>