0

我只想在电子邮件中放入一系列 4 个居中（水平）的社交图标，但它们一直被 gmail 和 yahoo 放在左侧！

    <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>

这是一个jsfiddle。

我希望它们不要在整行上拆分，而是非常“集中”，因为您看到每个图标之间必须水平只有几个像素（左 6 像素，右 6 像素）

4

3 回答 3

1

编辑 - - - - - - - - - - - - - - - - - - - - - - - - - --------------------------

这种只使用表格的方法怎么样？

检查新的小提琴

HTML

<table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #F2F2F2;">
    <colgroup>
        <col width="20%" />        
        <col width="60%" /> 
        <col width="20%" />             
    </colgroup>
    <tr>
        <td>
        </td>
        <td style="text-align:center">
        <a rel="nofollow" target="_blank" href="#">
            <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="Facebook" />
        </a>
        <a rel="nofollow" target="_blank" href="#">
            <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="Twitter" />
        </a> 
        <a rel="nofollow" target="_blank" href="#">
            <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="Pinterest" />
        </a>
        <a rel="nofollow" target="_blank" href="#">
            <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="Tumblr" />
        </a> 
        <a rel="nofollow" target="_blank" href="#">
            <img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="Instagram /" />
        </a>            
        </td>
        <td>
        </td> 
    </tr>
</table>
于 2013-08-07T16:05:40.563 回答
1

在电子邮件中，始终align="left|center|right"用于水平对齐和valign="top|middle|bottom"垂直对齐。将此应用于您的表格单元格<td align="center">。

这是jsfiddle有两种可行的方法

这是一个非常基本的 align 和 valign 示例：

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#252525">
  <tr>
    <td align="center" valign="middle" height="100">
      <img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
      <img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
      <img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
      <img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
    </td>
  </tr>
</table>
于 2013-08-07T16:03:06.073 回答
1

我相信这应该text-align: center不仅仅是align: center在您的主表数据单元格中（因为您将其称为 css 样式参数）。此外，vertical-align而不是valign.

如果这样做不行，请尝试添加text-align: center;到表格样式中，然后关闭float:left每个样式，td以便它们display: inline-block;代替。

祝你好运！

于 2013-08-07T16:03:29.390 回答