时间戳

首页 > 解决方案 > 电子邮件模板中的 CSS 未居中 div 子级

html - 电子邮件模板中的 CSS 未居中 div 子级

问题描述

我在哈巴狗中有这个电子邮件模板：

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"

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

标签： htmlcsspug

解决方案

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

推荐阅读