我在我的电子邮件模板中有一个头像，在圆形背景中只显示文本的第一个字母。由于我不能在电子邮件模板中使用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应用程序，我在所有测试的地方都得到了预期的结果。下面是应用程序的截图：

的数据
正如你所看到的，文本没有垂直对齐。因为它在应用程序中而不是在浏览器中，我无法检查元素来调试问题。
应用程序中的文本无法正确对齐的原因是什么？解决方案是什么？

更新1

尝试通过删除display: inline-block和vertical-align: middle来修复此问题，并使用display: table和display: table-cell代替。未修复此问题。它在Gmail应用程序中看起来仍然相同。以下是更新的代码：

<div style='width: 36px; height: 36px; display: table; background-color: #625fff; border-radius: 36px;'>
      <div 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;'>Sadman Rizwan</div>
</div>

型

更新2

我发现，文本的行高大于父div的高度，这就是为什么文本在父div中没有垂直对齐的原因。但我不知道这是怎么回事，因为我为两者都设置了36px。我也不知道是父div变小了还是Gmail应用程序中的行高变高了。有没有办法找到这个？

更新3

最后，我能够通过使用display: table-cell进行垂直对齐而不是依赖于line-height来解决这个问题。下面是最终代码：

<div style="width: 36px; height: 36px; border-radius: 36px; background-color: #625fff; text-align: center; display: table-cell; vertical-align: middle;">
      <div style="width: 1ch; overflow: hidden; white-space: nowrap; font-family: monospace, monospace; text-transform: uppercase; background-color: #625fff; color: white; font-size: 18px; line-height: normal; display: inline-block; vertical-align: middle;">John Doe</div>
</div>

型