CODEWITHSUNDEEP
html-emailvertical-alignment
Tom
Tom

Reputation: 91

Vertical align on TD for email templates or newsletters

As you recommend on this site, I´m using nested tables for my email templates and newsletters. But, I´ve a problem with the vertical align.

Code…

…
<td align="center" height="30px" valign="middle" >
  <p style="font-family: Verdana; font-size: 16px;" align="center">
    Here is the text
  </p>
</td>
…

Now the explanation…

When I see it on my e-mail client (Thunderbird) I do not have problems.

When I see it on my outlook app on my android cellphone, I also do not have problems.

BUT, when I see it through the webmail of live.com, it respects the HEIGHT of the TD BUT NOT the valign attribute.

My question… Is there a universal way to align these contents vertically? If I was working on WEB, I know several, but, since all recommend TABLES for email templates, I´m stuck.

Any suggestion?

Thanks a lot.

Resolved:

Changing <p> for <span> and using valign (because vertical-align:middle does not work in all the platforms) I see the same on the app, on the live webmail and on thunderbird.

Upvotes: 2

Views: 2961

Answers (2)

Gortonington
Gortonington

Reputation: 3587

Build 3 rows

<tr>
<td height="10">&nbsp;</td>
</tr>
<tr>
<td>Your content here</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
</tr>

Probably need to use some line-height and mso-line-height-rule:exactly etc in there to make it consistent, but should force a middle vertical align cross all clients.

Upvotes: 1

Angel M.
Angel M.

Reputation: 2742

why don't you use try to use vertical-align in style? it worked for me.

<td align="center" height="30px" style="vertical-align:middle; " >
  <p style="font-family: Verdana; font-size: 16px;line-height:30px;" >
    Here is the text
  </p>
</td>

I changed styles. I think p tag is not necessary here:

<td align="center" height="30px" style="vertical-align:middle;font-family: Verdana; font-size: 16px;line-height:30px; " >      
    Here is the text
</td>

Upvotes: 1

Related Questions