英文:
Unable to center an HTML template sent by email
问题
我正在使用React和MUI开发一个Web项目，代码会获取用户输入的信息，然后传递给HTML模板，最后通过电子邮件发送。我遇到的问题之一是，当我查看电子邮件时，HTML内容未垂直居中（参见图片）1。为了使HTML内容垂直居中，我正在使用以下CSS：
display: flex;
justify-content: center !important;
奇怪的是，如果我测试HTML，它能正常工作，但是当我在Chrome或Firefox中查看电子邮件时，它不起作用。通过检查开发者工具，发现justify-content: center !important这个值从未出现。如果我手动添加它，它将使内容垂直居中。
以下是代码示例：
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>
<!-- 其他内容 -->
</table>
</div>
</body>
</html>`;
};
另一个问题是关于图片，它们未加载，原因不明。
英文:
I am working on a web project with react and MUI, the code takes information that a user writes and pass it to an HTML template then it sends it by email. One of the problems I have is that when I check the email the HTML is not vertically center (see image)1. To center the HTML I am using:
display: flex;
justify-content: center !important
What is odd is that if I test the HTML, it works, but when I check the email either on chrome or Firefox it does not work. Checking the devtools the value justify-content: center !important is never there. If I added manually it will center the content the way I wanted.
This is the code:
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>`;
};
Another error I have is with the images, they are not loading not sure why.
答案1
得分: 0
根据这个帖子，大多数邮件客户端不支持 display:grid/flex。
我用以下CSS替换了：
#myElement{
display: flex;
justify-content: center !important;
}
替换成了：
#myElement{
text-align:center";
}
这样可以运行。
如果你正在使用nodemailer发送邮件，你可以参考这个页面来发送嵌入式图片。
英文:
According to this post, the display:grid/flex is not supported by most email clients.
I replaced the following CSS:
#myElement{
display: flex;
justify-content: center !important;
}
with
#myElement{
text-align:center";
}
It works.
If you are using the nodemailer to send email, you can refer to this page for sending embedded images.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论