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电子邮件时，我无法使用div，position属性。必须坚持使用table代码和内联css 。

谢谢。

Answer 1

删除padding代码上的td：

＆＃13;

<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>

＆＃13;

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

HTML电子邮件：将文本放在表格中的图像上

1 个答案: