中心對齊顯示：表格單元格內td

Question

我正在創建電子郵件模板 - 當然使用表格。

我在td裏面有一個圓形的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>

Answer 2

在TD添加align=center到中心內部元件，這裏是更新fiddle

Answer 3

垂直對齊表格單元默認情況下「中間「 所以，不需要添加此屬性。總之，如果你想要的文字水平居中對齊，你應該嘗試以下屬性在你的HTML代碼，它將不使用額外的定位工作：

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

Answer 4

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 5

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在該類 - 表td.circle p {position：relative; left：31px; }