HTML 电子邮件 CSS : Centering the table and table content, 最受支持的解决方案-6ren

HTML 电子邮件 CSS : Centering the table and table content, 最受支持的解决方案

转载作者：行者123 更新时间：2023-12-04 08:54:27

24

4

我正在准备用于邮寄的电子邮件 html 文件。我正在使用 table、tr、td 标签。到目前为止，我的 html 的全部内容都放在一个表格中，包括一个单元格中的另一个小表格(见下图)。我希望整个表格始终显示在中心。我还希望小表格显示在单元格的中间。外表的宽度是固定的。
我尝试放入 CSS:

margin-left: auto;
margin-right: auto;

和

margin: 0px auto;

，所有这些都是我在这里找到的。预览看起来不错，将文件上传到群发邮件系统后的预览也可以正常工作。但是发送后，居中根本不显示(内表在Gmail中也根本不显示，只有它的内容)。所以我正在寻找最常见、使用最广泛的 html 属性，它很可能在每个浏览器/邮件客户端的中间显示表格。或者，关于类属性可能错误使用的建议。
我的整个部分:

<style>
table, th, td {
    border-collapse: collapse;
    font-family: Verdana, sant-serif;
}

th, td {
    padding: 15px;
    text-align: left;
}

.main {
    width:1000px;
    border: 5px solid #114889;
    margin: 0px auto;
}

.inside {
  width: 500px; 
  border: 1px dotted #0000CC;
  background-color: #CCE5FF;
  text-align: center;
  font-size: 10px;
  margin: 0px auto;
}
    
</style>

我不是该主题的专业人士，因此我为使用错误的术语表示歉意。
编辑:
在 Outlook 中显示。一切都很好，但左对齐:

在 Gmail 中显示。没有任何表格:

最佳答案

Outlook 仅适用于表格，因此您从这个 Angular 处理它是正确的。但是，某些 Gmail 环境甚至不考虑嵌入式 CSS(<head> 部分中的 CSS)。您需要“内联”CSS ( https://www.campaignmonitor.com/resources/tools/css-inliner/ )。
要在 Outlook 中居中表格，请使用 <table> 上的属性对齐像这样的元素:<table width="300" align="center"...> .您可能还需要用 <center>...</center> 将其全部包裹起来。，即使该标签已被弃用(是的，电子邮件是那么旧!)。
您通常会发现 Outlook 将支持这些属性 - 例如边框颜色，<td bgcolor="#abcdef"...> - 而其他人将支持内联样式，例如<td style="background-color:#abcdef"...> .您应该同时使用两者，而不是依赖嵌入式 CSS。
如果您需要，我可以在发布受影响的 HTML 后进行更具体的更新。

关于HTML 电子邮件 CSS : Centering the table and table content, 最受支持的解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63918269/

24

4

0

文章推荐： python - 如何在 TensorFlow v2.0 中正确应用梯度

文章推荐： android-add top padding 到 Chip 文本

文章推荐： python - (又一个) 'ImportError: No module named my_module'

css - 如果有一个 --> .content p, .content ul, .content li, .content a，什么是 SASS 方法？
什么是 SASS 方法要求干燥这样的东西: .content p, .content ul, .content li, .content a 最佳答案这 4 个元素都有共同的样式吗？ .conten
contentful - 使用 Contentful 检索内容类型的更友好方式
我正在评估 Contentful.com 作为 Angular SPA 的内容引擎。我面临的问题是按内容类型检索条目(例如，获取“博客”类型的所有条目)。如 documentation exampl
javascript - CSS : add content to an element is `content: "text to add";` as remove content from an element is ` ? 中的等价物是什么？？？？`
在我编辑的主 wiki 上有一个名为 Item: 的自定义命名空间，提示是该命名空间内的每个页面都显示为 Item:This_item - - Item:That_item -- Item:Foo_i
Can not uploading content to WordPress folder /wp-content/uploads/woocommerce_uploads/(无法将内容上载到WordPress文件夹/wp-Content/Uploads/WooCommerce_Uploads/)
我正在尝试编写一个Python脚本，可以将图片和pdf上传到WordPress。我希望图像上传到文件夹‘/wp-Content/Uploads/’，将pdf文件上传到文件夹‘/wp-Content/U
contentful - 如何监控 Contentful API 的使用情况？
是否可以监控进行了多少次 Contentful API 调用，并理想地在即将超过配额时收到通知？谢谢最佳答案当然，您可以在右侧用户配置文件的下拉菜单 > Organizations and Bi
content-disposition - Content-Disposition 文件名中的分号
我在尝试在 IE8 中下载带有分号的文件名时遇到问题。 Response.AddHeader("Content-Disposition", "attachment; filename=\"" + at
contentful - 如何通过 Contentful Delivery API 查看内容条目的语言环境
我在 Contentful Delivery API 中运行查询以返回基于它的 slug 的特定页面项目。这个查询还设置了语言环境，以便它只返回我需要呈现的语言的数据。但是，我还需要设置页面的 hr
contentful - 如何在 Gatsby 中处理 Contentful 内容数据
我有兴趣使用 Gatsby建一个Netlify使用来自 Contentful 的内容的静态网站 Netlify 有这个不错的 Gatsby 入门指南: https://www.netlify.com/
git - 如何修复git中的 "modified content, untracked content"？
目标是提交一个 git 分支。分支的“git status”的输出是: On branch zeromq_new Your branch is up to date with 'origin/zero
c# - 设置 content in C#
我目前正在学习在 ASP.NET 3.5 和 C# 中使用 MasterPages 和 ContentPlaceHolders - 现在，我正在拼命尝试通过我的编程代码编辑 asp:Content-C
java - 如何比较两个文本文件的内容并返回 "Same Content"或 "Different Content"？
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
html - 如何在 content 和 content::before 上使用不透明度而不重叠
我使用 bootstrap 3 作为我的网格框架和 CSS 来创建一个具有一个倾斜/倾斜边缘的半透明区域，但由于分层不透明度，我的元素遇到了问题。期望是中心是倾斜的，但右侧仍然是正方形。有没有更好
java - 非法参数异常 : Unknown URL content://CONTENT
IllegalArgumentException: 未知 URL 内容:// ^ 对上述内容做了噩梦。我检查了我的变量和路径，但看不出问题是什么？非常感谢任何指点! 这是我的痕迹。 java.lan
javascript - 尝试通过扩展元素填充 polymer 元素的
我有两个元素:一个是元素，另一个是元素。 populated-drop-down extends drop-down ，但是，正如您可能已经猜到的那样，它会尝试使用一些选项预先填充它。假设我可以简
ruby - 产量 :content doesn't show content_for :content
我想我也有同样的问题。 Using multiple yields to insert content 我尝试了这个解决方案。我试过在我的 application.html.erb 中有 conte
html - justify-content 和 align content 的默认值是什么？
此链接 ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) 表示 justify-content 和 align-content 的
cocoa - "Content Values"和 "Content Objects"有什么区别
我现在正在探索绑定(bind)，并且有一个 NSPopUpButton - 它为我提供了一些值选择下的绑定(bind)选项 - Content , Content Objects , Content
Xamarin 形式 : Content View doesn't display in content page
正在尝试在内容页面中加载内容 View 。当我运行代码时，它不会出现在我的内容 View 中。我正在从我的内容页面分配两个可绑定(bind)参数。内容页面: 内容 View :
javascript - 获取 :before content and printing special characters from content
我想从我的 :before 标签中获取 content。我知道有些人会说它不是真正的(伪)元素，但在 JS 中有一种方法，但有人可以帮助我在 JQ 中做到这一点，因为我有多个标签并且我想用 $.eac
Linux : mail send file content as mail content
我创建了一个.sh脚本，并将结果记录在一个文件中，执行后我会尝试将文件内容作为mail正文发送。这是我运行的命令: sh update.sh >> update.$(date +"%Y-%m-%d:

首页

博学

6Ren·AI

商城

HTML 电子邮件 CSS : Centering the table and table content, 最受支持的解决方案