Hello,

I am having problems getting html text to center over a background image. The code is working fine in in Outlook.com and Gmail and responsively on iphone and android.

In Outlook 2013 the contents (text and white border) are anchoring to the top and the table with the white border is only the height of the contents within it (not the height="460" or style="min-height:460px;" specified in the <table>)

In Yahoo Mail the contents is offset to the left.

The code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style> 

img {display:block}

body {-webkit-text-size-adjust: none;}

td, th, td {text-align: center;}

.ReadMsgBody
{ width: 100%;}
.ExternalClass
{width: 100%;}


/* Smartphones (portrait and landscape) ------------------------------------------------------------------------------------------ */

@media screen and (max-device-width: 580px), screen and (max-width: 580px) {

body { padding: 0; margin: 0; width: 100% !important; text-align:center; }

table {border-collapse: collapse; width:100%; max-width: 600px; text-align:center;}

table[class=main] {width: 95% !important; height: 95% !important;}

*[class=BG_Table] {height:400px !important;}
*[class=BG_Cell] {height:400px !important; border:none !important;}

/* FORMATS TEXT FOR MOBILE */

td[class=Mobile_Text_01] {font-size:40px !important; font-weight:bold; letter-spacing:12px !important; color:#FFFFFF; line-height:48px !important; padding:0px 15px 0px 15px; text-align:center;}
td[class=Mobile_Text_01] a {font-size:40px !important; font-weight:bold; letter-spacing:8px !important; color:#FFFFFF; line-height:48px !important; padding:0px 15px 0px 15px; text-align:center; text-decoration:none !important;}

}

</style>
</head>

<body yahoo="fix" style="margin: 0 auto; padding: 0pt;">

<table id="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">

<tr>
<td align="center">
<table class="main" width="600" bgcolor="#FFFFFF" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px; table-layout:fixed; margin: 0 auto;">


<!------------------------ BACKGROUND IMAGE ------------------------>

<tr valign="middle">
<td align="center" bgcolor="#a30a06" valign="middle">
<table class="BG_Table" cellpadding="0" cellspacing="0" border="0" width="600" height="500" valign="middle">

<tr valign="middle">
<td class="BG_Cell" background="http://hosting.drct2u.com/emailtest/James/BG_Image_01.jpg" bgcolor="#a30a06" width="600" height="500" valign="middle">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:500px;">
    <v:fill type="tile" src="
<td background="http://hosting.drct2u.com/emailtest/James/BG_Image_01.jpg" color="#a30a06" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>

<table class="BG_Cell" cellpadding="0" cellspacing="0" border="0" width="560" height="460" valign="middle" align="center" style="border:1px solid #FFFFFF; min-height:460px;">

<tr valign="middle" align="center">
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0" width="500" valign="middle" align="center">

<!------------------------ TEXT LINE 01 ------------------------>

<tr>
<td class="Mobile_Text_01" style="font-family:Times, 'Times New Roman', serif; font-size:60px; font-weight:bold; letter-spacing:8px; color:#FFFFFF; line-height:70px; vertical-align:middle; text-align:center;">BLACK<br />
FRIDAY<br />
OFFER</td>
</tr>

<!------------------------ TEXT LINE 02 ------------------------>

<tr>
<td style="font-family:Helvetica, Arial, sans-serif; font-size: 26px; font-weight:100; letter-spacing:6px; color:#FFFFFF; line-height: 32px !important; vertical-align:middle; text-align:center;"><br /><a href="#" target="_blank" style="color: #FFFFFF; text-decoration: none;">50&#37; OFF 500 ITEMS</a></td>
</tr>



</table>
</td>
</tr>

</table>

</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>

</table>
</td>
</tr>

</table>

</td>
</tr>
</table>

</body>
</html>