行高不适用于移动设备

Question

我有一个图标字体，我需要将我的信件放在一个圆圈中。 我在this jdfiddle中复制了我的代码 这是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>

正如您可以通过普通浏览器看到的那样，它们居中

但是当我通过手机打开页面时，我看到了这一点
如果我从浏览器检查器关闭行高，则会得到相同的结果。

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

Answer 1

您是否尝试添加

vertical-align:middle;

在大多数情况下，它有效。

或者你可以使用填充，并避免使用：

调整大小

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