Center Ausrichtung einer Anzeige: Tabelle-Zelle in einem td

Question

Ich erstelle eine E-Mail-Vorlage - mit Tabellen natürlich.

Ich habe ein gerundetes Element in einem td, um seinen Inhalt vertikal zu orientieren Ich habe die display: table-cell Eigenschaft verwendet.

Das Problem ist, dass jetzt der Kreis nicht in der nicht mehr selbst td ausgerichtet Zentrum bei der Verwendung von margin: 0 auto

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

Wie ca n zentriere ich den Kreis, ohne zusätzliche Positionierungshacks zu verwenden, die in einer E-Mail nicht unterstützt werden?

Answer 1

Sie benötigen ein weiteres Element in td, da Sie margin: 0 auto mit table-cell nicht verwenden können. Code Arbeiten im unten Snippet:

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

align=center in td Fügen Sie das innere Element zu zentrieren, hier die fiddle

Answer 3

vertical-align in Tabellenzelle ist standardmäßig "aktualisiert ist Mitte " Also keine Notwendigkeit, diese Eigenschaft hinzuzufügen. Wie auch immer, wenn Sie horizontal ausrichten Mitte SMS senden möchten, sollten Sie folgende Eigenschaft in Ihrem HTML-Code versuchen, wird es ohne zusätzliche Positionierung arbeiten:

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

die CSS hinzufügen in dieser Klasse - Tabelle td.circle p {Position: relativ; links: 31px; }