我正在使用React和MUI进行一个Web项目，代码将用户编写的信息传递给HTML模板，然后通过电子邮件发送。我遇到的一个问题是，当我检查电子邮件时，HTML不是垂直居中（见图）1。要将我正在使用的HTML居中：
display: flex;
justify-content: center !important奇怪的是，如果我测试HTML，它可以工作，但当我在Chrome或Firefox上检查电子邮件时，它不起作用。检查devtools值justify-content：重要的是永远不会在那里。如果我手动添加，它会以我想要的方式将内容居中。
这就是代码：
import dgoow from "../images/dgo 2.png";
export const emailBody = (event, date, channels, priority, countries) => {
return `
<html>
<head>
<style>
* {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
color: white;
}
h3,
h5 {
color: white;
}
table {
border: none;
}
button {
color: white;
border-radius: 5px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 16px;
cursor: pointer;
background-color: #fd8204;
border: none;
padding: 1rem;
margin-bottom: 2rem;
}
img {
height: 70px;
width: 150px;
}
#myElement{
display: flex;
justify-content: center !important;
}
</style>
</head>
<body id="myElement">
<div id='dos' style="background-color: #050914;border-radius: 10px;padding: 3rem;width: 800px;margin: 3rem;">
<table>
<tr>
<td style="text-align: start; padding: 1rem; width: 50%; position: relative;">
<img src=${dgoow} alt="DWEGO logo" />
</td>
<td style="text-align: end; padding: 1rem; width: 50%; position: relative;">
<img src=${dgoow} alt="DWEGO logo" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; font-size: 20px">
<h1>HWRTE Notification</h1>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; font-size: 20px">
<h3>Event: ${event}</h3>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; font-size: 20px">
<h3>Date: ${date}</h3>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; font-size: 20px">
<h3>Channels: ${channels}</h3>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; font-size: 20px">
<h3>Priority: ${priority}</h3>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; font-size: 20px">
<h3>Countries: ${countries}</h3>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="www.google.com" target="_blank">
<button>JOIN THE BRIDGE</button>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>`;
};我的另一个错误是与图像，他们不加载不知道为什么。
1条答案
按热度按时间dgenwo3n1#
根据这个post，大多数电子邮件客户端不支持
display:grid/flex。替换了以下CSS：
与
它的工作。
如果您使用nodemailer发送电子邮件，您可以参考this page发送嵌入式图像。