html - 不使用 flexbox 或网格的电子邮件中的 HTML/CSS 居中项目

Question

我正在创建一封电子邮件，因此我可以使用的 CSS 范围非常有限，仅限于电子邮件客户端支持的内容。例如，display: flex或者display: grid在许多电子邮件客户端中不受支持。

我正在尝试实现下面的图像，但我不能 100% 确定如何在不使用网格或弹性框的情况下实现它。

具体来说，我不确定如何使该4.4数字居中（该数字是动态生成的，在某些情况下可以有 3 位或更多位），同时将箭头和0.2 above average文本块保持在4.4元素的右侧.

我也不能使用:afteror:before伪元素，因为大多数电子邮件客户端也不支持这些元素。

以下是我目前拥有的粗略示例。仅从下面的小片段中，这个问题就很明显了。

<div style="box-sizing: content-box; padding: 15px 0; width: 100%; text-align:center;">
  <h1>This Week's Ratings</h1>
  <h3>[IMAGE GOES HERE]</h3>
  <div style="margin: 0 auto;">
    <h2 style="display: inline-block">100</h2>
    <p style="display: inline-block">↑&lt;/p>
    <p style="display: inline-block">20 above<br>average</p>
  </div>
</div>

我将如何修改上面的代码片段以实现我在图像中的目标？

标签： htmlcssemailhtml-email

Answer 1

而不是text-align:center您可以将所有内容放在一个 div 下，然后使用以下代码将元素居中：

./# div_name{
    width:500px;
    margin:0 auto;
}