大家好我想为雅虎邮件调整我的社交图标图片我试了很多东西但是结果是一样的我还尝试了table-layout：fixed;风格，但我的图像仍显示在左边对齐任何一个帮助我从这个问题我的代码片段在
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>My Promo | Email</title>
<style type="text/css">
body {background-color:#fcfcfc;}
/* Client-specific Styles */
div, p, a, li, td { -webkit-text-size-adjust:none; }
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
html{width: 100%; }
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #33b9ff;text-decoration: none;text-decoration:none!important;}
.punch{font-size:22px;color:#32fac9;line-height: 1;}
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/*IPAD STYLES*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #33b9ff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #33b9ff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
img[class=banner] {width: 440px!important;height:220px!important;}
img[class=col2img] {width: 440px!important;height:220px!important;}
.punch{font-size:22px;color:#32fac9;line-height: 1;}
}
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #33b9ff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #33b9ff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 100%!important;text-align:center!important;}
table[class=devicewidthinner] {width: 100%!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:94px!important;}
img[class=col2img] {width: 280px!important;height:100px!important;margin-left:0px!important;margin-right:0px!important;}
.punch{font-size:19px;color:#32fac9;line-height: 1;}
}
</style>
</head>
<body>
<!-- Start of preheader -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader" >
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" align="left" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #000" st-content="preheader">
Can't see this Email? View it in your <a href="#" style="text-decoration: none; color: #d73914">Browser </a>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of preheader -->
<!-- Start of header -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="postfooter" >
<tbody>
<tr>
<td>
<table width="600" bgcolor="#242740" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="500" height="50" align="center" style="font-size:19px;color:#32fac9;line-height: 1;">
My Punch Line
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Header -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- Start of main-banner -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="banner">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" bgcolor="242740" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
<tbody>
<tr>
<!-- start of image -->
<td align="center" st-image="banner-image">
<div class="imgpop">
<a target="_blank" href="#"><img width="517" border="0" height="159" alt="" border="0" style="display:block; border:none; outline:none; text-decoration:none;" src="img/banner.png" class="banner"></a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- end of image -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of main-banner -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- Start of Left Image -->
<!-- End of Left Image -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- start of Full text -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="full-text">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#fff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<!-- Title -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 20px; color: #282828; text-align:center; line-height: 24px;">
Hello (Mr Name)
</td>
</tr>
<!-- End of Title -->
<!-- spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- End of spacing -->
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #636363; line-height: 24px; text-align: left;padding:0 10px;">
Email Body
</td>
</tr>
<!-- End of content -->
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Full Text -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- Start of footer -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="footer">
<tbody>
<tr>
<td>
<table width="600" bgcolor="#eacb3c" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#eee" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<!-- Social icons -->
<table width="150" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="43" height="43" align="center">
<div class="imgpop">
<a target="_blank" href="#">
<img src="img/facebook.png" alt="facebook" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">
</a>
</div>
</td>
<td align="left" width="20" style="font-size:1px; line-height:1px;"> </td>
<td width="43" height="43" align="center">
<div class="imgpop">
<a target="_blank" href="#">
<img src="img/twitter.png" alt="twitter" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">
</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- end of Social icons -->
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of footer -->
<!-- Start of Postfooter -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="postfooter" >
<tbody>
<tr>
<td>
<table width="600" bgcolor="#242740" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<tr>
<td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader">
<span style="font-size:17px;color:#fff;display:inline-block">
Read about our
<a target="_blank" style="color:#d73914;text-decoration:none" href="http://some.com/my-terms.html">policy.</a>
</span>
</td>
</tr>
<tr>
<td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader">
<span style="font-size:12px;color:#fff;display:inline-block"> © 2015 all rights reserved.
<br>
<a href="http://www.some.com" style="color:#52b4ed">www.some.com</a>
</span>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of postfooter -->
</body>
</html>
社交图标在正常的html，gmail，outlook中看起来很棒但在yahoo中看不到我所需的电子邮件是雅虎在yahoo社交图标视图中左边对齐而不是当前对齐即中心。
提前致谢