“我需要在电子邮件中发送HTML模板。在HTML中，有一个多边形图像，位置编号内的图像应该居中。但是，在发送邮件时，编号内的图像未对齐。如何解决我修好了吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<table>
<tbody>
<tr style="display: flex; justify-content: center; margin:0 60px 35px 60px">
<td align="start" valign="start" style="padding-bottom: 10px;">
<p style="color:#181C32; font-size: 18px; font-weight: 600; margin-bottom:13px">What’s next?</p>
<div style="background: #F9F9F9; border-radius: 12px; padding:35px 30px">
<div style="display:flex">
<div style="display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-right: 13px; position: relative;">
<img alt="container" src="https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png" />
<span ---------- ---------- ---------- ---------- ---------- style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">1</span>
</div>
</div>
<div style="display:flex">
<div style="display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-right: 13px; position: relative;">
<img alt="container" src="https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png" />
<span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">2</span>
</div>
</div>
<div style="display:flex">
<div style="display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-right: 13px; position: relative;">
<img alt="container" src="https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png" />
<span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">3</span>
</div>
<div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>通过电子邮件发送 HTML 模板时，我注意到内部带有数字的多边形图像未对齐。如何确保图像内的数字在电子邮件中正确居中？
我不确定您想要实现什么，但这是示例的简化版本，它执行与我所理解的需要类似的操作。
重点是使用图像作为包含数字的 div 的背景，并使用 flex 属性将数字正确居中。它应该确保数字始终位于图像的中间。
.container {
background: #AAA;
border-radius: 12px;
padding: 35px 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tile {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
position: relative;
background-image: url(https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.tile-number {
color: #50CD89;
font-size: 16px;
font-weight: 600;
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<table>
<tbody>
<tr style="display: flex; justify-content: center; margin:0 60px 35px 60px">
<td align="start" valign="start" style="padding-bottom: 10px;">
<p style="color:#181C32; font-size: 18px; font-weight: 600; margin-bottom:13px">
What’s next?
</p>
<div class="container">
<div class="tile">
<span class="tile-number">1</span>
</div>
<div class="tile">
<span class="tile-number">2</span>
</div>
<div class="tile">
<span class="tile-number">3</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>