当电子邮件比父 div 宽时如何使子 div 居中答案

【问题标题】：How to center child div when wider than parent div for email当电子邮件比父 div 宽时如何使子 div 居中
【发布时间】：2022-01-05 20:08:37
【问题描述】：

我正在通过 SendGrid 创建一个自定义电子邮件文件。我试图让我的页脚跨越客户端的整个宽度，特别是对于桌面。我得到了一个 600 像素的列，因此我的页脚在移动设备上看起来不错，但在桌面上却很薄。

我尝试让我的页脚 div 更宽（使它比它居中的父级更大）并给它一个负的左边距，使它完美地居中。遗憾的是，Gmail 忽略了负边距。

围绕 SO 有许多其他技术可以使子级居中，无论宽度如何，但它们都不是电子邮件客户端的有效 CSS。电子邮件 CSS 不允许：

位置
弹性
转换：翻译

text-align: center 是允许的并且可以解决问题，但前提是孩子比其父母瘦。

当子 div 比父 div 宽时，还有什么其他技术可以让我居中？

注意：更多允许/禁止的 CSS 可以在 https://www.caniemail.com/ 找到。它是用于电子邮件客户端的 caniuse.com。

.parent {
  width: 100px;
  height: 100px;
  text-align: center;
  border: 5px solid orange;
}

.wide-child {
  height: 100%;
  width: 150%;
  background: blue;
}

<div class="parent">
  <div class="wide-child">
  </div>
</div>

【问题讨论】：

caniemail.com 是最新的 :)
你能举一个最小的可重现的例子吗？那真的很有帮助
@Nathan 谢谢！添加了您的链接和示例
嗯，您所呈现的方式非常抽象且面向网络。能给个用例吗？电子邮件通常很老套，取决于您处理的内容类型：背景图片？图片？只是文字？ 2. 另外，您是否真的需要更广泛的内容，或者您是否正在寻找一种方法来适当地为移动和桌面扩展内容？真正的问题是什么？
我正在尝试让页脚的背景颜色占据桌面的整个宽度。内容本身（一些img链接和文本）是无关紧要的；它只需要居中。

标签： html css html-email

【解决方案1】：

对于那些对实际解决方法感兴趣的人，我通过将 600px 列的宽度改为 100% 来解决页脚问题，使我的页脚与视口一样宽，并将其余元素居中 - 视觉上没有区别。

我仍然对使子元素中心比其父元素更宽的解决方案感兴趣。

【讨论】：