title: How to align images for yahoo mail
body: <p>Hello every one I want to align my social icon images for yahoo mail I try many thing but result is same I also try table-layout:fixed; style but my images still showing on left align any one help me out from this problem my code snippet is below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
     &lt;link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'&gt;
        &lt;title&gt;My Promo | Email&lt;/title&gt;
        
        &lt;style type="text/css"&gt;
    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;}
          
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
  &lt;!-- Start of preheader --&gt;
  &lt;table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader" &gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                 &lt;tbody&gt;
                    &lt;tr&gt;
                       &lt;td width="100%"&gt;
                          &lt;table width="600" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" align="center" class="devicewidth"&gt;
                             &lt;tbody&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td width="100%" align="left" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #000" st-content="preheader"&gt;
                                      Can't see this Email? View it in your &lt;a href="#" style="text-decoration: none; color: #d73914"&gt;Browser &lt;/a&gt; 
                                   &lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                             &lt;/tbody&gt;
                          &lt;/table&gt;
                       &lt;/td&gt;
                    &lt;/tr&gt;
                 &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;!-- End of preheader --&gt;       
  &lt;!-- Start of header --&gt;
  &lt;table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="postfooter" &gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;table width="600" bgcolor="#242740" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                 &lt;tbody&gt;
                   
                    &lt;tr&gt;
                      &lt;td  width="500" height="50" align="center" style="font-size:19px;color:#32fac9;line-height: 1;"&gt;
                                                  My Punch Line
                    &lt;/tr&gt;
                    
                 &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;!-- End of Header --&gt;
  &lt;!-- Start of seperator --&gt;
  
  &lt;!-- End of seperator --&gt; 
  &lt;!-- Start of main-banner --&gt;
  &lt;table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="banner"&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                 &lt;tbody&gt;
                    &lt;tr&gt;
                       &lt;td width="100%"&gt;
                          &lt;table width="600" bgcolor="242740" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"&gt;
                             &lt;tbody&gt;
                                &lt;tr&gt;
                                   &lt;!-- start of image --&gt;
                                   &lt;td align="center" st-image="banner-image"&gt;
                                      &lt;div class="imgpop"&gt;
                                         &lt;a target="_blank" href="#"&gt;&lt;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"&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                   &lt;/td&gt;
                                &lt;/tr&gt;
                             &lt;/tbody&gt;
                          &lt;/table&gt;
                          &lt;!-- end of image --&gt;
                       &lt;/td&gt;
                    &lt;/tr&gt;
                 &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;!-- End of main-banner --&gt;  
  &lt;!-- Start of seperator --&gt;
  
  &lt;!-- End of seperator --&gt;   
  &lt;!-- Start of Left Image --&gt;      
  
  &lt;!-- End of Left Image --&gt;      
  &lt;!-- Start of seperator --&gt;
  
  &lt;!-- End of seperator --&gt;   
  &lt;!-- start of Full text --&gt;
  &lt;table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="full-text"&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                 &lt;tbody&gt;
                    &lt;tr&gt;
                       &lt;td width="100%"&gt;
                          &lt;table bgcolor="#fff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                             &lt;tbody&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"&gt;&amp;nbsp;&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td&gt;
                                      &lt;table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner"&gt;
                                         &lt;tbody&gt;
                                            &lt;!-- Title --&gt;
                                            &lt;tr&gt;
                                               &lt;td style="font-family: Helvetica, arial, sans-serif; font-size: 20px; color: #282828; text-align:center; line-height: 24px;"&gt;
                                                  Hello (Mr Name)
                                               &lt;/td&gt;
                                            &lt;/tr&gt;
                                            &lt;!-- End of Title --&gt;
                                            &lt;!-- spacing --&gt;
                                            &lt;tr&gt;
                                               &lt;td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"&gt;&amp;nbsp;&lt;/td&gt;
                                            &lt;/tr&gt;
                                            &lt;!-- End of spacing --&gt;
                                            &lt;!-- content --&gt;
                                            &lt;tr&gt;
                                               &lt;td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #636363; line-height: 24px; text-align: left;padding:0 10px;"&gt;
                                                Email Body
  
                                               &lt;/td&gt;
                                            &lt;/tr&gt;
                                            &lt;!-- End of content --&gt;
                                            
                                         &lt;/tbody&gt;
                                      &lt;/table&gt;
                                   &lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"&gt;&amp;nbsp;&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                             &lt;/tbody&gt;
                          &lt;/table&gt;
                       &lt;/td&gt;
                    &lt;/tr&gt;
                 &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;!-- End of Full Text --&gt;
  
  
  &lt;!-- Start of seperator --&gt;
  
  &lt;!-- End of seperator --&gt;
  &lt;!-- Start of footer --&gt;
  &lt;table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="footer"&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;table width="600" bgcolor="#eacb3c" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                 &lt;tbody&gt;
                    &lt;tr&gt;
                       &lt;td width="100%"&gt;
                          &lt;table bgcolor="#eee" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                             &lt;tbody&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"&gt;&amp;nbsp;&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td&gt;
                                      &lt;!-- Social icons --&gt;
                                      &lt;table  width="150" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth"&gt;
                                         &lt;tbody&gt;
                                            &lt;tr&gt;
                                               &lt;td width="43" height="43" align="center"&gt;
                                                  &lt;div class="imgpop"&gt;
                                                     &lt;a target="_blank" href="#"&gt;
                                                     &lt;img src="img/facebook.png" alt="facebook" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;"&gt;
                                                     &lt;/a&gt;
                                                  &lt;/div&gt;
                                               &lt;/td&gt;
                                               &lt;td align="left" width="20" style="font-size:1px; line-height:1px;"&gt;&amp;nbsp;&lt;/td&gt;
                                               &lt;td width="43" height="43" align="center"&gt;
                                                  &lt;div class="imgpop"&gt;
                                                     &lt;a target="_blank" href="#"&gt;
                                                     &lt;img src="img/twitter.png" alt="twitter" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;"&gt;
                                                     &lt;/a&gt;
                                                  &lt;/div&gt;
                                               &lt;/td&gt;
                                               
                                            &lt;/tr&gt;
                                         &lt;/tbody&gt;
                                      &lt;/table&gt;
                                      &lt;!-- end of Social icons --&gt;
                                   &lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                                &lt;tr&gt;
                                   &lt;td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"&gt;&amp;nbsp;&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;!-- Spacing --&gt;
                             &lt;/tbody&gt;
                          &lt;/table&gt;
                       &lt;/td&gt;
                    &lt;/tr&gt;
                 &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;!-- End of footer --&gt;
  &lt;!-- Start of Postfooter --&gt;
  &lt;table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="postfooter" &gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;
     
     
     
     
     
     
              &lt;table width="600" bgcolor="#242740" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"&gt;
                 &lt;tbody&gt;
                    &lt;!-- Spacing --&gt;
                    &lt;tr&gt;
                       &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;!-- Spacing --&gt;
                   &lt;tr&gt;
                       &lt;td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader"&gt;
                          &lt;span style="font-size:17px;color:#fff;display:inline-block"&gt;
               Read about our
              &lt;a target="_blank" style="color:#d73914;text-decoration:none" href="http://some.com/my-terms.html"&gt;policy.&lt;/a&gt;
        &lt;/span&gt; 
                       &lt;/td&gt;
                    &lt;/tr&gt;
                    
                    &lt;tr&gt;
                       &lt;td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader"&gt;
                          &lt;span style="font-size:12px;color:#fff;display:inline-block"&gt; © 2015 all rights reserved.
        &lt;br&gt;
         &lt;a href="http://www.some.com" style="color:#52b4ed"&gt;www.some.com&lt;/a&gt;
        &lt;/span&gt; 
                       &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;!-- Spacing --&gt;
                    &lt;tr&gt;
                       &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;!-- Spacing --&gt;
                 &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;!-- End of postfooter --&gt;      
     &lt;/body&gt;
     &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Social icons looks great in normal html, gmail, outlook but not in yahoo my required email is yahoo in yahoo social icons view at left align not in current align i.e centere.</p>
  
  <p>thanks in advance</p>