css行高无法在移动设备

Question

我试图在我的hyprid app（离子）

中使用line-height对齐一些垂直中间的项目

我基本上做了什么：

.wrapper {
    height: 35px;
  }

.item {
    background: lightgreen;
    float: left;
    height: 100%;
  }

.item span {
    line-height:35px;
  }

<div class="wrapper">
   <div class="item">
     <span class="icon-check"></span>
     <span>818</span>
   </div>   
</div>

什么行不通：

在Chrome开发人员模式中，一切都很好：文本与绿色容器的中心完美对齐..

..但是当我在我的设备上渲染应用程序时（iphone4s ios8.4.1应用程序：离子视图），文本不再是垂直居中的：

例如：如果您看一下眼睛图标旁边的“2”，您可以看到“2”不完全垂直

我的问题： 为什么桌面浏览器和移动应用程序中的文本显示有所不同？ 我可以解决这个问题吗？

由于

PS：还尝试使用flex和table-cell将垂直居中，但两种方法在桌面和移动设备之间略有不同

编辑：我使用translate（-50％）和line-height：1再次对齐intems;这是我的结果：

我更改了font-family之后：

因此font-family负责渲染问题。 我是否必须选择其他字体，或者有没有办法用Give字体修复此问题？ （在没有出现的桌面版本上..一切看起来都很棒）

Answer 1

我和你有同样的问题，发现它是字体的问题......它太奇怪了，无法理解。它适用于除IOS chrome之外的任何设备。

Answer 2

您可以尝试添加text-align =＆＃34; center＆＃34;在你的div标签中。

<div text-align="center"> 

这应该保持图像和文本排成一行。 或者您可以在CSS中使用它。

span {
position: relative;
top: 50%;
transform: translateY(-50%);
}