电子邮件中css边框三角形中的文本居中

我试图在电子邮件中使用css边框生成一个三角形，并在其中放入一些动态文本（数字），但我想将其设置为三角形中心，我无法使用定位，因为它正在从内联css中删除

我曾尝试将三角形css的div和文本span放在div容器中，并使用position对齐，但没有成功

<div style="<%= MailComponents.create_style('display' => 'inline-block', 'width' => '2px', 'height' => '0px', 'border-radius' => '4px' ,'border-left' => '20px solid transparent', 'border-right' => '20px solid transparent' ,'border-bottom => '30px solid #FC577A', 'color' => '#fff', 'vertical-align' => 'middle', 'line-height' => '28px', 'margin-top' => '-10px') %>">
            <span style="<%= MailComponents.create_style('position' => 'relative', 'left' => '-8px','vertical-align' => 'middle', ) %>">
              <%= some dynamically generated number %>
            </span>
          </div>

没用 我想知道这是否可以通过表格来完成

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
显示：网格；
网格模板列：自动；
证明内容：中心；
对齐项目：居中；
}
.包装纸{
背景：#000；
宽度：200px；
高度：200px；
-webkit剪辑路径：多边形（0%87%、50%0%、50%0%、100%87%）；
剪辑路径：多边形（0%87%，50%0%，50%0%，100%87%）；
}

JS-Bin

Tnx！我不知道电子邮件中支持网格，这在将来对其他事情可能也会很有帮助。@AQUANGEL网格可以删除并替换为其他内容，但我怀疑电子邮件中是否支持剪辑路径。我敢肯定，如果你正在制作电子邮件模板，它会失败。我建议你使用三角形图像，并在td上使用align=“center”，因为剪辑路径不适用于outlook客户端。因此，justify content center在gmail中似乎不起作用：\triangle pic的想法听起来不错，唯一的问题是我们讨厌的设计师会像-不！创建三角形是你的工作！你做到了！MehYou可以在谷歌上找到大量图片。检查此解决方案

http://jsfiddle.net/VScFS/57/