電子郵件中的媒體查詢對齊方式

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

，他們會中心很好。 除非在移動時特別使用反向排序，否則不需要定義單元格上的對齊方式。

但是看着你的代碼，你希望左對齊的單元格內部的內容也要對齊到最左邊，而右邊的內容是居中的。 我會建議將內容左對齊的單元格包裹在表格中，並將其中的單元格對齊。