Gmail Android 应用程序中的文本未垂直对齐

Question

我的电子邮件模板中有一个头像，仅在圆形背景内显示文本的第一个字母。由于我无法在电子邮件模板中使用 JavaScript，因此我仅使用 CSS 来实现此目的。这是我正在使用的 html：

<div style='width: 36px; height: 36px; display: inline-block; vertical-align: middle; background-color: #625fff; border-radius: 36px; line-height: 36px;'>
      <p style='width: 1ch; height: 36px; font-size: 18px; line-height: 36px; margin: 0px auto; word-break: break-all; overflow: hidden; letter-spacing: 18px; color: white; font-family: monospace, monospace; vertical-align: middle;'>John Doe</p>
</div>

除了 Gmail Android 应用程序之外，我在测试的所有地方都使用此代码获得了预期结果。以下是应用程序的屏幕截图：

如您所见，文本没有垂直对齐。由于它位于应用程序中而不是浏览器中，因此我无法检查元素来调试问题。

应用程序中文本未正确对齐的原因可能是什么？那么解决办法是什么？

Answer 1

与

flex

相关的元素（如

display: inline-block

和

vertical-align: middle

）在 Gmail 中不起作用，您需要删除它们并使用其他方法来对齐元素，以便它可以在 Gmail 中运行