How to centre this html in an email?

Issue

I'm struggling with the html in this email (for a booking management tool called [https://www.checkfront.com/][1]).

This code works fine sent from gmail to gmail, Office to gmail, pagebuilder to gmail, etc. When sent from Checkfront's HTML editor as a booking notification to gmail, my "justify-content" styling is stripped away.

 <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'

Here is the code for the whole email: https://codepen.io/Grabgooglesgoogles/pen/OJOGjYz

I would love feedback in case there is an aspect of the code which doesn't follow best practices and in case these other clients are all making allowances for my lack of knowledge 😊

Can I provide more information? Let me know! Jack

Edit: I've also now tried changing the table row and table data to divs, but this hasn't helped either.

Solution

You need to force each <td> to width: 20%, otherwise it is only as wide as its contents.

Answered By - kmoser