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
Post a Comment