如何在td中对齐几个表 [英] How to align several tables in td in center

问题描述

我试图将td中的所有表格居中。解决方案应该在电子邮件客户端，如outlook，Windows Live e.t.c.但它们垂直对齐。如何在div中心对齐表格？

I am trying to center all tables in td. Solution should work good in email clients such as outlook, Windows Live e.t.c. But they align vertically. How to align tables in center of 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>

推荐答案

这是因为LcSalazar你不能不同意他，

，但我假设您正在为电子邮件进行布局，如果您希望展望显示您期望的内容，则只有表格布局方式

因此表包含 rows 和列

如果你希望表内容显示在一行，你应该划分这个行在多少列您需要然后将内容放在单独的表中

that is because what LcSalazar you can not disagree with him,
but I assume you are making layout for email and there is just the "table layout" way if you want the outlook to display what you expect
so the table contains rows and columns
if you want the table content to display in one line you should divide that line in how much columns you need and then put inside the content in separate 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>

这篇关于如何在td中对齐几个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！