【问题标题】:Can't center text in Outlook 2013无法在 Outlook 2013 中居中文本
【发布时间】:2016-05-29 22:14:20
【问题描述】:

这是一个愚蠢的问题,但我已经尝试了我能想到的所有方法,但仍然无法弄清楚如何在 Outlook 2003 中将这两个文本单元格居中。

这里是完整 html 文件的链接:https://github.com/justintemps/flash-updates/blob/master/dest/index-prod.html?ts=4

违规(不会居中的部分)在下方。

<table class="body" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0 auto 0 auto; text-align: center;">
    <tbody>
        <tr>
            <td align="center" style="text-align: center;">
                <center>
                    <table class="bodyContainer" align="center" width="600" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
                        <tbody>
                            <tr align="center">
                                <td class="mainImageContainer" align="center" style="margin: 0 auto; text-align: center;">
                                    <!-- INSERT LINK HERE -->
                                    <a href="" target="_blank">
                                        <!-- INSERT IMAGE URL HERE -->
                                        <img class="mainImage" width="600" alt="" src="http://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_484941.jpg" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
                                    </a>
                                </td>
                            </tr>

                            <tr align="center">
                                <td class="mainTitleContainer" align="center" width="600" style="margin: 0 auto; text-align: center;">
                                    <!-- INSERT LINK HERE -->
                                    <a class="noDecorate" href="" target="_blank" style="text-decoration: none;">
                                        <h2 class="mainTitle" style="font-family: Helvetica, Arial, sans-serif; color: #2f2f2f; margin: 0; padding-top: 5px; padding-bottom: 5px; text-align: left;">The International Labour Conference 2016 starts</h2>
                                    </a>
                                </td>
                            </tr>

                            <tr align="center">
                                <!-- INSERT SUMMARY HERE -->
                                <td class="bodyText" align="center" width="600" style="font-family: georgia, Palatino, 'Times New Roman', serif; font-size: 14px; line-height: 20px; text-align: left;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                    <span>
                                        <!-- INSERT LINK HERE -->
                                        <a class="decorate" href="" target="_blank" style="text-decoration: none; color: #37468E; font-weight: bold;">Read More&#187;</a>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </center>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】:

    标签: html css outlook html-email responsive-emails


    【解决方案1】:

    您有几个 text-align:left; 覆盖了您在父标签中所做的居中。

    ...padding-bottom: 5px; text-align: left;">The International...
    

    ...line-height: 20px; text-align: left;">Lorem ipsum dolor sit...
    

    如果您从上述示例中删除 text-align:left;,则这些区域应居中对齐。

    【讨论】:

    • 谢谢,成功了!
    【解决方案2】:

    这是工作。请复制所有 HTML 正文标记,如 here

    【讨论】:

    • 谢谢,肖拉布。我知道它在 CodePen 中工作,但我仍然无法在 Outlook 2013 中工作。
    猜你喜欢
    • 2017-05-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-11
    • 2018-01-12
    • 1970-01-01
    • 2016-05-08
    • 2018-07-11
    相关资源
    最近更新 更多