Currently, I am immersed in a web project utilizing react and MUI. The code collects user input data, inserts it into an HTML template, and sends it via email. One issue I'm encountering is that the HTML content is not vertically centered when viewed in the email client (refer to image)1. To address this problem, I've applied the following CSS:
display: flex;
justify-content: center !important
Interestingly, testing the HTML individually shows that it does center properly. However, upon checking the email through Chrome or Firefox, the alignment fails. Inspecting the devtools reveals that justify-content: center !important is missing. Manually adding this value resolves the issue.
Below is a snippet of the code in question:
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>`;
};
In addition, there seems to be an issue with the images not loading correctly, although the cause remains unclear.