电子邮件模板中的 CSS 未居中 div 子级答案

【问题标题】：CSS in email template not centering div children电子邮件模板中的 CSS 未居中 div 子级
【发布时间】：2021-07-28 14:09:40
【问题描述】：

我在 pug 中有这个电子邮件模板：

div(style={ display: 'flex', 'justify-content': 'center', 'flex-direction': 'row', 'text-align': 'center'})
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'facebook.png' alt='Facebook')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'linkedin.png' alt='Linkedin')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'instagram.png' alt='Instagram')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'twitter.png' alt='Twitter')

图标在本地完美显示在中心这是一张图片

但是在像 gmail 这样的电子邮件客户端中，css 属性会消失。当我检查时，我只看到这些 -> style="display:flex;text-align:center"

有人知道为什么会这样吗？有没有人对如何解决这个问题有任何建议？

【问题讨论】：

标签： html css pug

【解决方案1】：

Gmail 不支持所有 Flexbox 属性。例如，不支持flex-direction。与浏览器支持相比，电子邮件客户端对 CSS 功能的支持非常不同且受到更多限制。

您不需要 Flexbox 将内联元素（如 <a>）对齐到中心。你可以直接写这个：

div(style='text-align: center;')
  a(href="#" target="_blank")
    img.social_media_image(src='facebook.png', alt='Facebook')
  a(href="#" target="_blank")
    img.social_media_image(src='linkedin.png', alt='Linkedin')
  a(href="#" target="_blank")
    img.social_media_image(src='instagram.png', alt='Instagram')
  a(href="#" target="_blank")
    img.social_media_image(src='twitter.png', alt='Twitter')

【讨论】：