如何将此 table 单元格居中放置在一行中？

Question

我怎样才能将单个单元格置于 tr 的中心，是否有我可能不知道的属性？因此，如果可能的话，无论在上方或下方添加多少个单元格，我都希望该单个单元格居中。这是在电子邮件模板的上下文中。

td {
  border: 1px solid blue;
  padding: 50px;  
}

.center {
  padding: 0;
}

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td class="center">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

只需将 align="center" 添加到要设为中心的 table

td {
  border: 1px solid blue;
  padding: 50px;  
}

.center {
  padding: 0;
}

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table align="center">
        <tr>
          <td class="center">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

简单应用内部table

的左右margin: auto

td {
  border: 1px solid blue;
  padding: 50px;  
}

.center {
  padding: 0;
}

/*Apply left and right margin: auto of the inner table*/
#main table {
  margin:auto;
}

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td class="center">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

如何将此 table 单元格居中放置在一行中？

How to center this table cell inside a row?

css

html-table

html-email