如何在电子邮件中将 html 居中？

Question

我正在努力处理这封电子邮件中的 html（用于名为 [https://www.checkfront.com/][1] 的预订管理工具）。

此代码在从 gmail 到 gmail、Office 到 gmail、pagebuilder 到 gmail 等发送时工作正常。当从 Checkfront 的 HTML 编辑器作为预订通知发送到 gmail 时，我的“证明内容”样式是被剥夺了。

 <tr id="5imagesSection" class="ordenTable" style="display: flex; justify-content: center !important;">
<td id="smileyImage1"><a href="https://mymarbellaweekender.com/product-category/boats-and-yachts/"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle1300.png" height="100" width="100" alt="My Marbella Weekender" data-image="dhvrprieupdm"></a></td>
<td id="smileyImage2" style="margin-top:10%;"><a href="https://mymarbellaweekender.com/product/shuttle-transfers/"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle2300.png" height="100" width="100" alt="My Marbella Weekender" data-image="un1eob2gwjf1"></a></td>
<td id="smileyImage3" style="margin-top:20%"><a href="https://mymarbellaweekender.com/product-category/beach-pool-clubs/"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle3300.png" height="100" width="100" alt="My Marbella Weekender" data-image="veaowxr4ebv6"></a></td>
<td id="smileyImage4" style="margin-top:10%;"><a href="https://mymarbellaweekender.com/product/decor-balloons/"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle4300.png" height="100" width="100" alt="My Marbella Weekender" data-image="oxyhrbhzvjhi"></a></td>
<td id="smileyImage5"><a href="https://mymarbellaweekender.com/wp-content/uploads/2017/09/Catering-Menus-2022.pdf"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle5300.png" height="100" width="100" alt="My Marbella Weekender" data-image="uy3cf06q540k"></a></td></tr>

Image of HTML not being justified to center and justify-content:center being 'removed'

这是整个电子邮件的代码： https://codepen.io/Grabgooglesgoogles/pen/OJOGjYz

如果代码的某个方面没有遵循最佳实践，并且如果这些其他客户都对我缺乏知识给予宽容，我希望得到反馈

我可以提供更多信息吗？让我知道！杰克

编辑：我现在也尝试 changing the table row and table data 到 div，但这也没有帮助。

Answer 1

您尝试过在 tr 容器中使用 margin: auto 吗？

Answer 2

您需要将每个 <td> 强制为 width: 20%，否则它只会与其内容一样宽。

如何在电子邮件中将 html 居中？

How to centre this html in an email?

html

email