HTML Email Align Text

What's the best way to center your HTML email content in the browser window (or email client preview pane)?

Align the table to center.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

Where you have "your content" if it is a table, set it to the desired width and you will have centred content.

HTML email align text

Honestly, if you're doing an HTML email I'd stick to using tables. Not all CSS selectors are available in all email clients and you'll drive yourself mad trying to do it any other way. HTML emails are like the web 5 years ago.

There are a couple of good documents on the subject:

https://www.campaignmonitor.com/css/

http://www.emailology.org/

For your example:

<td>
  <table cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="left">First part</td>
      <td align="right">Second part</td>
    </tr>
  </table>
</td>

center image in html mail

<center> has been deprecated in favour of text-align: center.

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the
process of being dropped. Avoid using it and update existing code if
possible; see the compatibility table at the bottom of this page to
guide your decision. Be aware that this feature may cease to work at
any time.

Ref: <center> - HTML | MDN

Consider using:

text-align: center instead on the containing element (th) of the
img element, or
display: block; margin: auto on the nested img element

...as demonstrated in the embedded code snippet below.

Code Snippet Demonstration:

*:not(code) {  font-family: arial;}
code {  background: #cccccc;  padding: 3px;}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">  <tr>    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">      Using <code>align="center"</code> attribute <sup><small><i class="fa fa-thumbs-o-down"></i> (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#Attributes" target="_blank">deprecated</a>)</small></sup> on containing element    </th>  </tr>  <tr>    <th align="center" style="border: 1px solid gray; padding: 10px;">      <img src="https://placehold.it/207x55" alt="Sample Image" width="207" height="55" border="0"/>    </th>  </tr></table><br><table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">  <tr>    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">      Using <code>text-align:center</code> inline-style property on containing element    </th>  </tr>  <tr>    <th style="border: 1px solid gray; padding: 10px; text-align: center;">      <img src="https://placehold.it/207x55" alt="Sample Image" width="207" height="55" border="0" style="display: inline-block;"/>    </th>  </tr>  <tr>    <td style="padding: 10px;">      <p>In most cases declaring <code>text-align: center</code> on the containing parent element is enough since <code>img</code> elements are inheritly <em>inline</em>. But to ensure that this behaviour is consistent across all email clients declare <code>display: inline-block</code> on the nested <code>img</code> as well.</p>    </td>  </tr></table><br><table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">  <tr>    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">      Using <code>display: block; margin: auto;</code> inline-style properties on nested <code>img</code>    </th>  </tr>  <tr>    <th style="border: 1px solid gray; padding: 10px;">      <img src="https://placehold.it/207x55" alt="Sample Image" width="207" height="55" border="0" style="margin: auto; display: block;"/>    </th>  </tr></table>

Alignment issue with HTML email in Outlook

You've got "740px" for each of the Outlook-specific (if mso) table columns. You would need to make them 33%, 50% and 16% -- but as pixels -- for Outlook to work.

Incidentally, you should also inline the widths for other email environments that don't support <style> blocks. For example, Gmail IMAP doesn't support this. So just put the width:33% inline instead of as a class.

Here's the new code:

    <!-- COLUMN TITLE -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
    <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:7px;text-align:center;">
                    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
                    <div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                        <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">DATE AND TIME</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
                    <div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
                                        <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">TITLE</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
                    <div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
                                        <div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">CODE</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td></tr></table><![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- END COLUMN TITLE -->

<!-- HORIZONTAL LINE -->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
    <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
                    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
                    <div class="column-per-100 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="center" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                        <p style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:100%;">
                                        </p>
                                        <!--[if mso | IE]><table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:700px;" role="presentation" width="700px" ><tr><td style="height:0;line-height:0;">  
                                        </td></tr></table><![endif]-->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- END HORIZONTAL LINE -->

<!-- FAULT ROW -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
    <table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
                    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
                    <div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
                                        <div style="text-decoration:none;font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#528ecb;">[DATE_TIME]</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
                    <div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
                                        <div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[TITLE]</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
                    <div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
                        <table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
                                        <div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[CODE]</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--[if mso | IE]></td></tr></table><![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--END FAULT ROW -->

email templates, outlook and right align

Apply text-align: right; to the table cell where the href is located.

margin is problematic in Outlook. In the desktop 2011-16, it ignores margin, but will respond to Margin. So Margin-bottom will work, but margin-bottom is ignored.

For more information of the fun you will encounter with Outlook, check out these resources:

https://litmus.com/help/email-clients/outlookcom-margins/
https://www.campaignmonitor.com/css/

Good luck.

Aligning elements left and right inline in td for html email

please use this HTML - no need to cal or other HTML, table have different CSS so use table parameter or attribute for email.

<table width="100%" border="0" cellpadding="10" cellspacing="0">    <tr bgcolor="#00a2c5">     <td align="left" width="50%" height="40px"><a href="#" style="color:#ffffff;">Call 13 63 93</a></td>     <td align="right" width="50%"><a href="#" style="color:#ffffff;">Clarendon.com.au</a></td>    </tr></table>

HTML email: top and bottom aligned content

Swap out your CSS vertical-align:top; in the td's for this: <td valign="top">.

valign accepts top|middle|bottom values, while align (horizontal) accepts left|center|right.

For this layout, you will also need either rowspan or a fixed height, as a nested table (your 2 rows of text) will not push to the max height of the container cell.

Here is a basic example of both valign and rowspan applied:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="400" height="200" valign="top" bgcolor="#EEEEEE">Align Top
    </td>
    <td width="200" rowspan="2" valign="middle" bgcolor="#777777">
      <img alt="image" src="" width="200" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="400" height="300" valign="bottom" bgcolor="#CCCCCC">Align Bottom
    </td>
  </tr>
</table>

It helps to set a height on your rowspanned cells, as Outlook can sometimes guess and mess up your rowspan break points. More info on that here (although it refers to colspan, the same applies)

Align Email Center Outlook

Your code will work well if you simply replace

min-width:600px;

with

width:600px;

Vertically center text in HTML email

So... I figured it out! You need to use the show/hide classes on the container and not on the TD itself in order to make the vertical center work.

<tr>
  <td>
    <table class="hideMobile" bgcolor="#ed1848" border="0" cellspacing="0" cellpadding="0" width="100%" height="121">
      <tr>
        <td width="112" border="0" cellspacing="0" cellpadding="0" valign="middle" style="border-collapse:collapse;"><img src="image.jpg"  width="112" height="121" alt="Sample Image" style="display: block;width: 112px; height:auto;" border="0" ></td>

        <td class="hideMobile" width="247" height="121"  valign="middle" bgcolor="#ed1848" style="text-align: left; font-size: 30px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; -webkit-text-size-adjust: none; mso-line-height-rule: exactly;">Thanks for <br>your interest.</td>
      </tr>
    </table>

<!--[if !mso 9]><!-->
<table class="showMobile hideOnDesktop" bgcolor="#ed1848" border="0" cellspacing="0" cellpadding="0" width="100%" height="121" style="display: none;">
  <tr>
    <td width="112" border="0" cellspacing="0" cellpadding="0" valign="middle" style="border-collapse:collapse;"><img src="image.jpg"  width="112" height="121" alt="Sample Image" style="display: block;width: 112px; height:auto;" border="0" ></td>

        <td border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ed1848" align="center" valign="middle" style="color: #ffffff; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px; mso-line-height-rule: exactly; white-space: nowrap;">Thanks for your interest.</td>

      </tr>
    </table>
    <!--<![endif]-->
  </td>
</tr>