文本在Gmail安卓应用中没有垂直居中对齐

Question

我正在电子邮件模板中使用一个头像，它仅显示文本首字母并在圆形背景内展示。由于无法在电子邮件模板中使用JavaScript，我仅依靠CSS来实现这一效果。以下是使用的HTML代码：


      John Doe

这段代码在我测试的所有环境中都能达到预期效果，但Gmail安卓应用除外。以下是应用中的截图：

如图所示，文本并未正确垂直居中。由于这是在应用程序而非浏览器中出现的问题，因此无法进行元素检查以调试问题。

导致Gmail应用中文本未能正确对齐的原因是什么？解决方案又是什么呢？

更新1

尝试通过移除display: inline-block和vertical-align: middle属性，并改用display: table和display: table-cell来修复此问题，但仍未解决问题，在Gmail应用中看起来仍然相同。以下是更新后的代码：


      Sadman Rizwan

更新2

我发现文本的行高大于其父元素的高度，因此文本未能在其父元素内垂直居中。但我不清楚为何会出现这种情况，因为我已将两者都设置为36px。同时，我也不知道是父元素在Gmail应用中变小了还是行高增加了。有没有什么方法可以查明这一点？

更新3

最终，我通过使用display: table-cell和vertical-align: middle来替代依赖line-height实现了垂直居中。以下是最终的代码：


      John Doe

Mike Hordecki · Answer

与flex相关的元素，如display: inline-block和vertical-align: middle在Gmail中不起作用，您需要移除它们并使用其他方式来对齐元素，以便在Gmail中正常工作。

Brian · Answer

最佳解决方案是在电子邮件中使用表格（table），并对单元格（td）应用内联样式，并仅包含姓名的第一个字符。请参考以下原始代码和建议的代码：



  John Doe






  
    
      J

假设您希望尽可能覆盖最广泛的受众，在各种电子邮件客户端和设备上测试时，可以看到

实例与

实例的表现如何。

希望这对您有所帮助。