HTML 电子邮件 : put text on image in table

Question

td {
  background: url(http://www.hubilo.com/theme/6/img/ribbon1.png);
  background-size: 220px 30px;
  background-position: center;
  background-repeat: no-repeat;
  padding-right: 10px;
  padding-top: 50px;
}

p {
  color: white;
  text-align: center;
  font-weight:100 !important;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 1px;
  font-size: 10px;
  line-height:10px;
  font-family: 'open sans', arial, sans-serif;
}

<table bgcolor="red" width=600>
  <tr>
    <td valign="top" align="center">
      <p>Saturday 5TH MARCH, 2016</p>
    </td>
  </tr>
</table>

我希望文本位于功能区图像的中心。

PS: 因为我正在制作 HTML Emailer，所以我不能使用 div, position 属性。必须坚持 table 标签和 inline css ，只有。

谢谢。

Answer 1

移除 td 标签上的 padding:

<table bgcolor="red" width=600>
   <tr>
  <td valign="top" align="center" style=" background: url(http://www.hubilo.com/theme/6/img/ribbon1.png); background-size: 220px 30px; background-position: center; background-repeat: no-repeat; padding-right: 10px;">
     <p style="color: white; text-align: center; font-weight:100 !important; text-transform: uppercase; font-style: normal; letter-spacing: 1px; font-size: 10px; line-height:10px; font-family: 'open sans', arial, sans-serif;">Saturday 5TH MARCH, 2016</p>
  </td>
   </tr>
</table>

JSFIDDLE https://jsfiddle.net/pzm4rknw/2/