HTML Table can't change the position of the text

user_15211284 0
Viewed 86

I am trying to change the position of the text to the TOP of the center. I am using table which i need to use in email template.

Here is my fiddle

https://jsfiddle.net/g2sbhf7k/

<td height="1"><p>hello</p><p>hello</p> </td>

this is showing in middle left, but i need to show in top center

Thanks

html-email css html
4 Answers

See if this helps

<td style="vertical-align: top; text-align: center;" height="1">
    <p>hello</p>
    <p>hello</p>
</td>
user_157912550

Using all the rest of your code, I just added a class

html:

<td height="1" class="topCenter"><p>hello</p><p>hello</p> </td>

css:

.topCenter{
  text-align: center;
  vertical-align: top;
}
user_123057150

Your answer is here .... though I've shorten some code:

https://jsfiddle.net/SAS3000/tx6zfgba/

table table {
  width: 191px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
  border: 1px solid #ddd;
}
td {
  text-align:center;
  vertical-align:top;
}
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;width:600px;background-color: #ffffff;">
<tr>
  <td align="left">
    <table height="180px" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="1">
        <p>hello</p>
        <p>hello</p> 
      </td>
    </tr>
    </table>
  </td>
</tr>
</table>

user_26859140

This can be done at table level without CSS as well.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td align="center" valign="top">centered text</td>
        </tr>
    </tbody>
</table>

user_74674280
Related