在 iphone 6 中居中响应式电子邮件答案

【问题标题】：Centering responsive email in iphone 6在 iphone 6 中居中响应式电子邮件
【发布时间】：2015-09-04 20:51:25
【问题描述】：

我的响应式电子邮件在 iphone 6 中向左对齐。我在包含表格和 TD 上都有align="center"。 320px 宽度在媒体查询中指定，主包含表具有 width="100%"。

@media only screen and (max-device-width: 480px)
table[class=threeHundred20], td[class=threeHundred20], tr[class=threeHundred20] {
width: 320px !important;
display: block !important;
}

我知道 iphone 6 高于我指定的 320 宽度，这造成了我不介意的侧边槽，但我需要将主要内容居中。有没有办法在不改变我的媒体查询以针对不同大小的情况下做到这一点？我想避免走这条路。

【问题讨论】：

标签： html css media-queries html-email iphone-6

【解决方案1】：

如果内容小于父容器，Display:block 有时会强制内容左对齐。 Try 而不是使用 inline-block 与 text-align: center 一起显示。

【讨论】：

我要同时添加 display: inline-block 吗？
如果你指的是table和td，应该只需要在table上。

【解决方案2】：

由于过去的一些经验

align:center;

我建议你使用

margin-left: 50%;
margin-right: 50%;

改为。

【讨论】：

谢谢，但这使内容向右对齐。
对不起，我弄错了。将 50%s 更改为“自动”。示例：jsfiddle.net/ywhnk0wz
非常感谢 - 集中了它！但现在由于某种原因它看起来真的很薄 - 任何想法为什么它会缩小宽度？
html-email中不要使用margin，所有邮件客户端都支持nok

【解决方案3】：

我一直使用这种方式，它适用于所有设备和电子邮件客户端

演示：https://jsfiddle.net/cL011mw3/

html:

<table width="100%">
<tr>
    <td>
        <table width="640" class="width320" align="center">
            <tr>
                <td bgcolor="#999999">
                    text
                </td>
            </tr>
        </table>
    </td>
</tr>

CSS：

@media only screen and (max-width: 500px){
*[class].width320{
    width:320px !important
    }
}

【讨论】：

【解决方案4】：

这对我来说非常适合：添加元数据：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />

添加媒体查询

@media only screen and (max-width: 480px){
.fullwidth,
.fullwidth tbody,
.fullwidth tbody > tr,
.fullwidth tbody > tr > td,
.fullwidth tbody > tr > th,
table[class=fullwidth],
table[class=fullwidth] tbody,
table[class=fullwidth] tbody > tr,
table[class=fullwidth] tbody > tr > td,
table[class=fullwidth] tbody > tr > th
td[class=main-border] {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    display: block !important; <!-- table, tbody, tr, td became blocs -->
    clear: both; <!-- to prevent floating ex: <table align="left"…> -->

    margin: 0 auto !important; <!-- to center the blocs -->
}

}

不要忘记tbody 在您的表格中将外观样式添加到额外的空白处：表包装器 + 主容器表：

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
    <tbody>
    <tr>
        <td valign="middle" align="center">
            <table class="fullwidth" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
                <tbody>
                <tr>
                    <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td> <!-- paddign & margin not supported by Outlook -->
                </tr>
                <tr>
                    <td valign="middle" align="center">
                        <table class="fullwidth" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
                            <tbody>
                            <tr>
                                <td>Col 1</td>
                                <td>Col 2</td>
                            </tr>
                        </tbody>
                    </td>
                </tr>
                <tr>
                    <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>

【讨论】：