css - How to center a list of icons on en amil (email html) -


i'd put in email series of 4 social icons centered (horizontally) keep being put gmail , yahoo on left side!

    <body bgcolor="#ffffff" style="margin: 0;padding: 0;-webkit-font-smoothing:  antialiased;-webkit-text-size-adjust: none;height: 100%;width: 100%;">     <table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #f2f2f2;">     <tr>         <td style="margin: 0 auto; padding: 0;display: block;max-width: 600px;clear: both; align: center; valign: top; background-color:#ffffff ;">           <table width="100%" style="padding:0px 5px 0px 5px;" cellspacing="0" border="0" bgcolor="#ffffff" align="center">             <tbody>               <tr>                                 <td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px; margin-bottom: 30px;">                   <a rel="nofollow" target="_blank" href="<%= t("social_urls.facebook_page_url") %>">                     <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="facebook">                   </a>                 </td>                 <td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">                   <a rel="nofollow" target="_blank" href="#">                     <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="twitter">                   </a>                 </td>                 <td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">                   <a rel="nofollow" target="_blank" href="#">                     <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="pinterest">                   </a>                 </td>                 <td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">                   <a rel="nofollow" target="_blank" href="#">                     <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="tumblr">                   </a>                 </td>                 <td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">                   <a rel="nofollow" target="_blank" href="#">                     <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="instagram">                   </a>                 </td>               </tr>                                  </tbody>           </table>                               </td>       </tr> </table>   </body> 

here jsfiddle.

i want them not split on whole line quite "concentrated" see each icon must have few pixels horizontally between them (6px left, 6px right)

i believe should text-align: center instead of align: center in main table data cell (because you're calling css style parameter). also, vertical-align instead of valign.

if doesn't it, try adding text-align: center; table style, switch out float:left on each td they're display: inline-block; instead.

good luck!


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -