Gmail安卓应用邮件模板文本垂直对齐异常的排查与解决

需求与初始实现 #

需要在邮件模板中实现圆形背景的首字母头像，由于邮件模板无法使用JavaScript，仅通过纯CSS实现。初始代码如下：

<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安卓应用中存在文本垂直对齐异常，且无法通过元素调试排查具体原因。

尝试的解决方案（均无效） #

尝试移除display: inline-block和vertical-align: middle，改用display: table布局，问题未解决：

<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>

进一步排查发现，对齐异常源于文本行高与父容器高度的冲突——尽管两者均设置为36px，但Gmail安卓应用可能修改了行高或父容器实际尺寸。

最终有效解决方案 #

通过display: table-cell的vertical-align: middle属性替代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>

内容的提问来源于stack exchange，提问作者Sadman Rizwan