android和ios中的文本垂直对齐问题答案

【问题标题】：Text vertical alignment issue in android and iosandroid和ios中的文本垂直对齐问题
【发布时间】：2014-02-14 01:32:58
【问题描述】：

我创建了一个网站，与桌面相比，Android 平板电脑和移动设备中的所有文本都适用于某些像素。

想复制一个小例子。

这是我的 html 代码：

<body>
      <h3>MAKING OF</h3>
</body>

这是css代码：

body {
    text-align: center;
    padding-top: 50px;
}
html {
    font-size: 62.5%;
}
@font-face {
    font-family: MPL;
    src: local("MPL"),
    url(fonts/MPL.ttf),
    url(fonts/MPL.eot);
}
h3 {
    font-family: MPL;
    font-size: 30px;
    font-size: 3rem;
    height: 60px;
    line-height: 60px;
    padding: 0px 12px;
    background-color: #5496F2;
    color: #000;
}

谁知道文字在平板电脑上没有正确对齐的原因。

这是桌面浏览器右对齐的屏幕截图

这是平板电脑浏览器上的问题截图

在桌面上，这在 FF 和 Chrome 中都可以正常工作，但在 android 平板电脑上，它在 Chrome 和 FF 浏览器上的对齐方式是错误的，而且它在 ios Safari 浏览器上也不能正常工作。这是链接：

http://inants.com/kadmos/web/kad/a/a

希望有人能帮助理解这个问题并提出最佳解决方案。

谢谢。

【问题讨论】：

标签： android html css google-chrome

【解决方案1】：

遇到过类似的问题。看起来是导致问题的自定义字体。尝试用诸如 Sans-serif 之类的通用字体替换自定义字体。尚不确定如何使用导致问题的相同自定义字体来解决问题。

【讨论】：

【解决方案2】：

您是否尝试过实际使用“vertical-align”css 属性？试试this。

【讨论】：