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

如果你将两个细胞对齐，它们就会很好地居中。您不需要在单元格上定义对齐，除非在进入移动设备时特别使用反向排序。

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

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

1 个答案: