使用表格时，如果文本短于表格宽度的 100%，则文本不会在表格单元格内居中

Question

我正在尝试使用 html 和 CSS 创建一个 email 模板，但我遇到了一个问题。 尝试将表格单元格内的文本居中时，如果文本短于表格的 100%，则文本不会居中。 我会给 Codepen 留下一个例子，这样你就可以看到我是如何尝试处理它的。

我在这里发现了一个类似的问题，但建议的答案是使用display: flex ，它的支持不是很好。 我已经测试了 flex 属性，但它不适用于 windows 本机 email 应用程序或 outlook。 我还使用了 Can I email 网站。

这是一个演示： https://codepen.io/raul-rogojan/pen/jOxNMdw?editors=1000

Answer 1

你有点用表格在脚上开枪，然后给单元格提供inline-block的display属性。 通常，您可以通过使用text-align: center在<td>文本居中。 例外是包含.number-container图标的<p>标记。 由于<p>默认为块元素，我会将其切换为<span>并使用相同的text-align: center规则来居中这些元素。 另外（这可能只是您的代码笔的工件），您正在做很多不需要的表格嵌套。 每行只有一个元素，因此不要嵌套表，只需将它们视为<tr>中的单个<td> > 。