user123 user123 - 3 months ago 9
CSS Question

HTML Email : put text on image in table



<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; padding-top: 50px;">
<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>





I want the text to be in the center of ribbon image.

PS: As I am making HTML Emailer, I can't use
div
,
position
property. have to stick to
table
tag and inline css , only.

Thank You.

Answer

Remove padding on td tag:

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

Comments