我尝试在我的hyprid应用程序（ionic）中使用行高将一些项目垂直居中对齐
我基本上是怎么做的：
.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单元格居中垂直，但这两种方法在桌面和移动设备之间都有相同的细微差异
编辑：我再次使用translate（-50%）和line-height对齐了中间项：1;下面是我的结果：
更改字体系列后：
因此，字体系列是负责渲染问题。我必须选择一个其他的字体或有一种方法来修复这个与给定的字体？（在桌面版本，不会发生..一切看起来很好）
3条答案
按热度按时间jq6vz3qz1#
我有同样的问题与你，并发现这是字体的问题...这是如此奇怪，无法理解。它的工作完美的任何设备，除了IOS chrome 。
fdbelqdn2#
您可以尝试像这样在div标签中添加text-align=“center”。
这样可以保持图片和文本对齐，或者你可以在CSS中使用这个。
5ktev3wc3#
您可以尝试在父元素上使用
height，而不是使用line-height(i.e)使按钮获得特定高度，而不是直接在元素上使用行高。