Html 线路高度不适用于移动设备

我有一个图标字体，我需要在一个圆圈中心我的信。 我在
这是css代码

.icon:before {
   margin: 0 auto;
   font-size: 57px;
}

.icon h2 { text-align: center; }

.circle.icon:before {
    border-radius: 50%; 
    color: #FFFFFF;
    width: 65px;
    height: 65px;
    display: block;
    text-align: center;
    line-height: 1.2em !important;
}

.icon.mobile:before{ content: 'F'; }
.mobileC { color: #8CC63E; }
.icon.mobile-background:before { background-color: #8CC63E; }

这是html代码

<div class="icon circle mobile-background mobile"><h2 class="mobileC ">Mobile games</h2></div>

手机游戏

正如您在普通浏览器中看到的，它们居中

但当我通过手机打开页面时，我看到了这一点

如果从浏览器检查器中禁用“线高度”，则会产生相同的结果

有人知道如何解决此问题吗？

您是否尝试添加

vertical-align:middle;

?

在大多数情况下，它是有效的

或者，您可以只使用填充，并通过使用以下命令避免调整大小：

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}