电子邮件中的媒体查询对齐

Question

我正在尝试使用电子邮件的媒体查询创建一个响应式两列行（在 table 中）。左列当前与左对齐，右列当前与中心对齐。当在移动设备上看到时，我希望左列居中，而右列保持对齐的中心状态。右栏将开始一个新行。

这是我的部分代码：

`<style>
@media only screen and (max-width: 40em)  {
.deviceWidth {width:100%!important;float:center!important;}                  
 table, thead, tbody, tfoot, th, td, tr {display:block!important;}  
.header{width:100%!important; display:block!important; align:center!important;}
        }       
</style>

<table cellpadding="0" cellspacing="0" width="100%" style="border-top:1px solid #e5e5e5; text-align:center;" class="deviceWidth">
<tr>
<td class="header" width="50%" align="left">
    <img src="" />
</td>
<td class="header" width="50%" align="center" style="padding:5px; font-family:Arial,Helvetica,sans-serif; font-size:11px; color:#000000">
     Text
</td>
</tr>
</table>`

有谁知道为什么左栏对中心没有反应

Answer 1

如果您取消对齐两个单元格，它们就会居中。您不需要在单元格上定义对齐方式，除非在移动设备上专门玩反向排序。

但是查看您的代码，您希望左对齐单元格内的内容也与最左侧对齐，而右侧单元格内的内容居中。我建议将左对齐单元格内的内容包装在 table 中，并左对齐其中的单元格。

电子邮件中的媒体查询对齐

Media Queries alignment in email

html-email

media-queries

responsive-design