1

我code在我的动态电子邮件模板之上添加了一个块（代码如下）。它在预览模式下看起来很完美，但在发送实际电子邮件时完全不同

这是它的外观

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #000000;
  font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
  <img src="http://cdn.mcauto-images-production.sendgrid.net/1714a3d54002df2a/a0f350e5-2a93-4de4-9d6b-a747ccb068a0/626x240.png" style="width:100%;">
  <div class="centered">CA {{first_name}}</div>
</div>

</body>
</html>

我想要实现的是图像中心的一些文本。我的代码有什么问题/遗漏吗？请指导我。谢谢！

4

1 回答 1

0

Twilio SendGrid 开发人员布道者在这里。

这不起作用，因为position: absolute在许多电子邮件客户端中不起作用。这也是使用预览模式后在电子邮件客户端中测试电子邮件很重要的原因。

查看这篇关于人造绝对位置的文章和这篇关于叠加层的文章，它们应该为您指明正确的方向来解决这个问题。

于 2021-11-04T22:49:58.827 回答