Pug邮件模板flex属性在Gmail失效导致子div不居中如何解决

问题原因 #

• 包括Gmail全平台版本在内的绝大多数邮件客户端，对现代CSS布局属性的支持度极低，justify-content、flex-direction这类Flexbox相关属性属于Gmail默认会过滤删除的属性，这是你最终仅保留display:flex和text-align:center的直接原因。
• 邮件HTML的兼容标准和普通网页完全不同，Flex、Grid这类现代布局方案在邮件开发场景中属于不推荐使用的属性，大部分客户端都会做裁剪处理。

可行修复方案 #

• 方案1：使用全客户端兼容的HTML表格实现居中布局（兼容性最好，是邮件开发的标准实现方式）

table(style={ width: '100%', border: 'none', borderCollapse: 'collapse', textAlign: 'center' })
  tr
    td(style={ padding: '0 8px' })
      a(href="#" target="_blank")
        img.social_media_image(src='facebook.png' alt='Facebook')
    td(style={ padding: '0 8px' })
      a(href="#" target="_blank")
        img.social_media_image(src='linkedin.png' alt='Linkedin')
    td(style={ padding: '0 8px' })
      a(href="#" target="_blank")
        img.social_media_image(src='instagram.png' alt='Instagram')
    td(style={ padding: '0 8px' })
      a(href="#" target="_blank")
        img.social_media_image(src='twitter.png' alt='Twitter')

以上代码所有邮件客户端均原生支持，可完美实现图标横向居中排列的效果。

• 方案2：使用inline-block实现，无需大幅修改结构，仅补充子元素样式即可
  修改父容器和子元素的内联样式即可，兼容覆盖99%以上的主流邮件客户端：

div(style={ width: '100%', textAlign: 'center', fontSize: 0 /* 消除inline-block默认间距 */ })
  div.image_column(style={ display: 'inline-block', margin: '0 8px', fontSize: '14px' /* 按需恢复正常字体大小 */ })
    a(href="#" target="_blank")
      img.social_media_image(src= 'facebook.png' alt='Facebook')
  // 其余3个社交图标结构保持和上面一致即可

内容的提问来源于stack exchange，提问作者SDB_1998