CSS 在电子邮件模板中未居中 div children

Question

我在 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"

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

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

CSS 在电子邮件模板中未居中 div children

CSS in email template not centering div children

html

css

pug