Question

我的响应式电子邮件正在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宽度，它创造了我不介意的侧面水槽，但我需要将主要内容集中在一起。有没有办法在不更改我的媒体查询以针对不同大小的情况下执行此操作？我想避免走这条路。

Answer 1

显示：如果内容小于父容器，则块有时会强制左对齐内容。 Try使用inline-block显示text-align：center。

Answer 2

由于过去的一些经验

align:center;

我建议你使用

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

代替。

Answer 3

I have always used this way, and it works on all devices and email clients

demo: 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
    }
}

Answer 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将Outlook样式表添加到额外的空白区域：表包装器+主容器表：

<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>

在iphone 6中集中响应式电子邮件

4 个答案: