简体   繁体   English

如何将Outlook电子邮件中的左对齐文本居中?

[英]How do I Center Left-aligned Text in an Outlook Email?

I'm trying to lay out a responsive email template to work across all major clients, and I'm just about there, but since Outlook doesn't support max-width , and I have all elements set to width: 100% , it's putting my content all the way to the left since it's left-aligned. 我正在尝试设计一个可响应的电子邮件模板以在所有主要客户中使用,并且就在那儿,但是由于Outlook不支持max-width ,并且我将所有元素都设置为width: 100% ,因此因为我的内容是左对齐的,所以将其一直放到最左边。 I can center the header and footer with align:center or margin: 0 auto . 我可以使用align:centermargin: 0 auto align:center页眉和页脚align:center

What can I do to prevent my content from going all the way to the left without giving anything a fixed width or using max-width (which I am using, but Outlook just ignores)? 我该怎么做才能防止我的内容在没有给出固定宽度或使用最大宽度的情况下一直向左移动(我正在使用,但是Outlook会忽略)?

Sounds like you are referring more to a "fluid" layout (basing off percentage) rather than a "responsive" one (where you would use media queries to specify styles based on width of display device). 听起来您似乎是在指的是一种“流体”布局(以百分比为基准),而不是一种“响应式”布局(您将在其中使用媒体查询根据显示设备的宽度指定样式)。

Since setting a pixel value for the margin-left wouldn't make a lot of sense, why not set the margin-left to a percentage value? 由于为margin-left设置pixel值没有多大意义,为什么不将margin-left设置为percentage值呢?

margin-left: 4%;

Otherwise, you might want to take a look at the following resource found on MailChimp regarding media queries. 否则,您可能想看看MailChimp上有关媒体查询的以下资源。

http://templates.mailchimp.com/development/media-queries/ http://templates.mailchimp.com/development/media-queries/

Try this and use media queries to adjust the width percentages at different screen sizes if needed. 尝试此操作,并根据需要使用媒体查询来调整不同屏幕尺寸的宽度百分比。 Just keep in mind that your media queries won't take effect in these email clients . 请记住,您的媒体查询不会在这些电子邮件客户端中生效。

</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#252525">
  <tr>
    <td align="center" style="padding-top:30px; padding-bottom:30px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="10%">&nbsp;
          </td>
          <td align="left" width="80%" bgcolor="#FFFFFF">
            &nbsp;<br>content<br>...<br>&nbsp;
          </td>
          <td width="10%">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body></html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM