Question

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

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

现在的问题是，即使使用td

，现在，margin: 0 auto中的圆圈也不再对齐

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

请参阅jsfiddle

HTML：

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;
}

的CSS：

gem 'pg'

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

Answer 1

您需要在td内添加一个元素，因为您无法margin: 0 auto使用table-cell。工作代码位于以下代码段中：

＆＃13;

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;
 }

＆＃13;

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

＆＃13;

Answer 2

在td中添加align=center以使内部元素居中，这里是更新的fiddle

Answer 3

Do you need likee this


  you can see the link: https://jsfiddle.net/gwmqrv8w/2/


Html code here
<table>
<tr>
  <td align="center" class="circle">
    <p>
    <b>12</b>
    <br/>
    views
    </p>
  </td>
</tr>
</table>

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

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

Answer 4

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

在该类中添加css - table td.circle p {position：relative;左：31px; }

Answer 5

如果您稍微修改HTML，则可以结合使用flexbox和table-cell：

.wrapper{
    display: flex;
    flex-direction: row;
}
.digit{
    display: table-cell;
    vertical-align: middle;
}
.text{
    display: inline;
}

<div class="wrapper">
    <div class="number">
        <div class="digit">1</div>
    </div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id justo posuere ex pharetra euismod bibendum vel nunc. Donec pharetra ipsum sit amet augue ornare, non sodales leo dapibus. Nunc mollis sodales diam, accumsan
        suscipit justo dignissim vitae. Nunc ultrices a elit nec hendrerit. Cras tempor elit quis nulla scelerisque aliquet. Nulla efficitur ac purus vitae porttitor. Morbi commodo efficitur ornare. Curabitur a ipsum dapibus erat iaculis finibus. Nullam dui nulla,
        viverra id laoreet eget, fringilla ac orci. Nulla iaculis enim vitae dui congue accumsan. Fusce cursus justo non quam sodales blandit
    </div>
</div>

Answer 6

表格单元格中的vertical-align默认为“middle” 因此，无需添加此属性。无论如何，如果您希望文本水平对齐中心，您应该尝试在HTML代码中使用以下属性，它将无需额外定位即可使用：

<td align="center">something</td>

中心对齐显示：td内的table-cell

6 个答案: