css line-height在移动设备上不起作用答案

【问题标题】：css line-height not working on mobile devicecss line-height在移动设备上不起作用
【发布时间】：2015-12-07 10:57:24
【问题描述】：

我尝试在我的 hyprid 应用程序（离子）中使用 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；这是我的结果：

在我更改字体系列之后：

因此字体系列负责渲染问题。我必须选择其他字体还是有办法用给定字体解决这个问题？（在桌面版本上不会出现..一切看起来都很棒）

【问题讨论】：

【解决方案1】：

我和你有同样的问题，发现是字体的问题……太奇怪了，看不懂。它可以在除 IOS chrome 之外的任何设备上完美运行。

【讨论】：

【解决方案2】：

您可以尝试像这样在 div 标签中添加 text-align="center"。

<div text-align="center">

这应该保持图像和文本对齐。或者你可以在你的 CSS 中使用它。

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

【讨论】：