如何将此表格单元格居中在一行内？ [复制]答案

【问题标题】：How to center this table cell inside a row? [duplicate]如何将此表格单元格居中在一行内？ [复制]
【发布时间】：2018-05-15 01:55:02
【问题描述】：

如何将单个单元格居中在 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>

【问题讨论】：

我知道你会说它不是重复的......但你所要做的就是使用margin:0 auto将表格元素居中
是的，谢谢...抱歉，在电子邮件模板的上下文中使用它

标签： css html-table html-email

【解决方案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>

【讨论】：

NO : w3schools.com/tags/att_table_align.asp --> 的 align 属性在 HTML5 中不受支持。改用 CSS。

@smithy 请不要接受这个答案，也不要使用它......它提供了一种过时的不受支持的居中方式，请参阅我分享的链接。

如果您正在构建 html 电子邮件，这是正确/最简单的方法

【解决方案2】：

简单应用内表左右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>

【讨论】：