html - 如何在电子邮件 Html 模板中将 td 中的多个表格居中对齐

Question

我正在尝试将所有表格置于 td 的中心。解决方案应该适用于 outlook、Windows Live 等电子邮件客户端。但它们垂直对齐。如何在 div 中心对齐表格？

    <td align="center" style="text-align:center;width:100%;" width="100%">
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://www.facebook.com/sharer/sharer.php?u=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/facebook.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://www.facebook.com/sharer/sharer.php?u=vk.com">Share</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title=" title=""><img alt="" src="http:///client/Content/images//social-links/linkedin.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title=">Share</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://twitter.com/intent/tweet?text=: vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/twitter.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://twitter.com/intent/tweet?text=: vk.com">Tweet</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="https://plus.google.com/share?url=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/google-plus.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="https://plus.google.com/share?url=vk.com">+1</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://vk.com/share.php?url=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/vkontakte.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://vk.com/share.php?url=vk.com">Share</a></td>
         </tr>
      </tbody>
   </table>
</td>

Answer 1

那是因为你不能不同意 LcSalazar，
但我假设您正在为电子邮件进行布局，如果您希望 outlook 显示您期望的内容，则只有“表格布局”方式
所以 table 包含 rows 和 columns
如果您希望 table 内容显示在一行中，您应该将该行分成您需要的 columns ，然后将内容放入单独的 tables

<table>
    <tbody>  
        <tr>
           <td>
                <!-- table content 1 -->
           </td>
            <td>
                <!-- table content 2 -->
           </td>
            <td>
                <!-- table content 3 -->
           </td>
            <td>
                <!-- table content 4 -->
           </td>
            <td>
                <!-- table content 5 -->
           </td>
         </tr>
    </tbody>   
</table>