Thunderbird 居中一些单元格，但不居中其他单元格

Question

响应式电子邮件模板中的内容需要在 Thunderbird 中居中显示。该模板包含几个嵌套在主 table 中的 table。内容中心位于 table 之一，但不位于其他 table 中，我不明白为什么。这是它的样子：

<style>

body {
    height: 100%;
    width: 100%;
}

.bodycontainer{
    max-width: 600px;
    padding: 15px 5px 15px 5px;
    display:block;
    line-height: 140%;
    color: #34282C;
}

</style>

<body>
    <table width="100%" style="table-layout: fixed; margin: 0 auto;">
        <tr>
            <td align="center">
                <table align="center" border="0" cellpadding="0" cellspacing="0" 
                style="padding: 5px 0; font-family: Helvetica, Arial, sans-serif; 
                font-size: 11px; color: #2e5a67; width: auto !important; 
                table-layout: fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content will center -->
                        <td align="center"><a target="_blank" href="" 
                        style="font-family: Helvetica, Arial, sans-serif; 
                        font-size: 10px; color: #999; text-decoration: none;">
                        This content will center</a>
                        </td>
                    </tr>
                </table>
                <table class="bodyContainer" cellspacing="0" border="0" 
                align="center" width="600" style="max-width: 600px; table-layout: 
                fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content WILL NOT center -->
                        <td align="center" style="padding:15px 0px 15px;"><a href="">
                        <img width="125" src="" 
                        alt="This image will NOT center" border="0"></a></td>
                    </tr>
                </table>
                <table class="bodyContainer" cellspacing="0" border="0" 
                align="center" width="600" style="padding-top: 15px;
                max-width: 600px; table-layout: fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content will center -->
                        <td class="" align="center" style="padding:10px 0 20px;">
                        <a href="" 
                        target="_blank"><img src="" 
                        alt="This image will center" width="80" 
                        border="0"></a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

Answer 1

问题出在您的 head 样式表中的 "Display:Block"。显示块将强制元素成为块元素。块元素宽度基于子内容的大小，并且默认为某种 'float:left' 并且没有简单的方法来覆盖它。最好的办法是从样式表中删除它。

如果您需要在您的电子邮件模板中包含 display:block（例如切片图像、背景颜色等），我会谨慎使用它并记住您放置它的元素将更改为如上所述。

Thunderbird 居中一些单元格，但不居中其他单元格

Thunderbird centers some cells, but not others

email-client

thunderbird

html-email