Wanting to vertically and horizontally align webp images in email platform with inline code

Question

Using ActiveCampaign and have inserted a block of code and all icons seem to be aligned with the exception of Youtube:

My code is as follows:

<div style="display: flex;
align-items: center;
justify-content: center;">
    <a style="margin: 0 5px;" href="https://www.facebook.com/iamryandrake"><img src="https://ryandrake.com/wp-content/uploads/2022/03/facebook-ryan-drake.webp" height="20" width="20"></a>
    <a style="margin: 0 5px;" href="https://www.instagram.com/itsryandrake"><img src="https://ryandrake.com/wp-content/uploads/2022/03/instagram-ryan-drake.webp" height="20" width="20"></a>
    <a style="margin: 0 5px;" href="https://www.tiktok.com/itsryandrake"><img src="https://ryandrake.com/wp-content/uploads/2022/03/tik-tok-ryan-drake.webp" height="20" width="20"></a>
    <a style="margin: 0 5px;" href="https://www.twitter.com/itsryandrake"><img src="https://ryandrake.com/wp-content/uploads/2022/03/twitter-ryan-drake.webp" height="20" width="20"></a>
    <a style="margin: 0 5px;" href="https://www.pinterest.com/itsryandrake"><img src="https://ryandrake.com/wp-content/uploads/2022/03/pinterest-ryan-drake.webp" height="20" width="20"></a>
    <a style="margin: 0 5px;" href="https://www.youtube.com/channel/UCjTohjNTL-fCUGd7Jb5wcfA"><img src="https://ryandrake.com/wp-content/uploads/2022/03/youtube-ryan-drake.webp" height="20" width="20"></a>
    <a style="margin: 0 5px;" href="https://www.linkedin.com/in/itsryandrake/"><img src="https://ryandrake.com/wp-content/uploads/2022/03/linkedin-ryan-drake.webp" height="20" width="20"></a>
</div>

Would love to know how I could best align this icon - as it's incredibly frustrating!

Answer 1

If I understood correctly you want to align these items inside an e-mail. Sometimes it can be really painful to style an e-mail, hence I would recommend you for that purpose not to align these different images in css, but to prepare more wisely your images.

Each of your icons should be image with the same dimensions, with icon already centered. This would provide a more consistent use of your icon design system.

This is a design practice I also recommend for any web project when it comes to icons.