HTML 电子邮件对齐文本

Question

I am trying to align a part of text to the right and the other part to the left in an HTML mail but in Outlook the float doesn't work. So basically I am looking for float CSS in Outlook. I know it sounds pretty creepy and text-align or align="" didn't work. Any suggestions?

<td>
   <span style="text-align:left; float:left;">
       First part
   </span>
   <span style="text-align:right; float:right;">
       Second part
   </span>
</td>

Answer 1

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>

It's horrible but unfortunately it's still the best way.

Answer 2

Use ( shudder ) layout tables.

Outlook's support for styling of email is so awful that there isn't any other way.

There is a 24 ways article with some general advice for writing HTML formatted email.

Answer 3

<p align="right">My right content</p>

它应该可以解决问题，因为它是 HTML1。

Answer 4

I had a similar issue. I wanted to center three images in the footer of my email. I got it to work like this.

            <div style="display:inline-flex; width:100%;">
                <img style="width: 15%; height:fit-content; margin: 0 7.5%;" src="https://example.com/employment-ontario.png" alt='img-logo0'/>
                <img style="width: 15%; height:fit-content; margin: auto 7.5%;" src="https://example.com/canada-logo.png" alt='img-logo1'/>
                <img style="width: 15%; height:fit-content;  margin: auto 7.5%;" src="https://example.com/ontario-govt.png" alt='img-logo2'/> 
            </div> 

the image with margin: 0 7.5% is the largest of all the images (if you want to imitate align-items: center set the other two to images to margin: auto 7.5% , they will automatically center your images.

Note: In this example 7.5% is for only one side of your container, so total margin on the left and right will be 15%. for one img, giving a total of 45% used.

Sum of mine is 90%, but you get the idea.

Image of what it looks like below.