How to align several tables in td in center

问题

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>

回答1:

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>

回答2:

I'm not going to enter in the matter of why you should reconsider your layout, so you wouldn't need nested tables... Neither should use table for layout... Also, why shouldn't you use so many inline styles... I'm simply going to answer your question as it is...

Here it goes:

A table by default acts like a block element, using full width and breaking the line.

To place them side-by-side, change their display property to inline-table

table table {
  display: inline-table;
}

<table>
  <tr>
    <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>
  </tr>
</table>

回答3:

add this style "display: inline-table;" for table remove the text-align:left; from table style .

来源：https://stackoverflow.com/questions/27421369/how-to-align-several-tables-in-td-in-center

标签

html

css

css3