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

Question

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

这是我的代码的一部分：

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

如果您从两个单元格中移除对齐，它们会很好地居中。 您不需要在单元格上定义对齐方式，除非在移动设备上专门使用反向排序。

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