html - 居中对齐显示 :table-cell inside a td

Question

我正在创建电子邮件模板 - 当然使用表格。

我在 td 中有一个圆 Angular 的 p 元素，为了垂直对齐它的内容，我使用了 display: table-cell 属性.

问题是，现在即使使用 margin: 0 auto

，圆圈也不再在 td 中居中对齐

参见 jsfiddle

html:

<table>
  <tr>
    <td class="circle">
      <p><b>12</b><br/>views</p>
    </td>
  </tr>
</table>

CSS:

td {
   width: 140px;
}

table td.circle p {
   margin: 0 auto;
   height: 70px;
   width: 70px;
   background-color: rgb(92, 177, 251);
   border-radius: 50%;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
}

如何在不使用电子邮件不支持的额外定位技巧的情况下使圆居中对齐？

Answer 1

您需要在 td 中添加一个元素，因为您不能将 margin: 0 auto 与 table-cell 一起使用。工作代码在下面的片段中:

td {
  background-color: gray;
  width: 140px;
}

table td.circle div {
  background-color: rgb(92, 177, 251);
  border-radius: 50%;
  color: white;
  font-size: 14px;
  text-align: center;
  display: table;
  margin: 0 auto;
  height: 70px;
  width: 70px;
}

table td.circle p {
  display: table-cell;
  vertical-align: middle;
 }

<table>
  <tr>
    <td class="circle">
      <div>
        <p>
          <b>12</b>
          <br/>
          views
        </p>
      </div>
    </td>
  </tr>
</table>