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

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

以下是我代码的一部分：

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

`
@仅介质屏幕和（最大宽度：40em）{
.deviceWidth{width:100%！重要；浮点：中心！重要；}
table、thead、tbody、tfoot、th、td、tr{display:block！important；}
.header{width:100%！important；display:block！important；align:center！important；}
}       
正文
`

---

有人知道为什么左列对中心没有反应吗？如果你把两个单元格的对齐都去掉，它们的中心就会很好。 您不需要在单元格上定义对齐方式，除非在使用移动设备时专门使用反向排序

但看看代码，您希望左对齐单元格中的内容也与最左侧对齐，而右侧单元格中的内容居中。

---

我建议将左对齐单元格内的内容包装在表格中，并将单元格内的内容左对齐。

看起来将左对齐单元格包装在表格中发挥了神奇的作用！非常感谢。别担心。乐意帮忙：）