Valign không hoạt động trong email Outlook HTML

Question

Vì vậy, tôi đã tranh luận cả tuần với một bản thiết kế lại cho công ty của tôi, tinh chỉnh html để làm cho nó hiển thị bán nhất quán trên các ứng dụng email. Tôi đã sử dụng tốt www.litmus.com cho phần lớn điều này. Đây là lỗi cuối cùng còn lại và nó tiếp tục lảng tránh tôi. Chúng tôi có một thanh điều hướng ngang trên đầu trang. Dưới đây là phiên bản bị tước xuống chỉ với một số <td>, thông thường có 5 trong số chúng:

<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle"> 
    <tr valign="middle"> 
     <td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >&nbsp; 
      <a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere"> 
       <span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span> 
      </a>&nbsp; 
     </td> 
    </tr> 
</table> 

Như bạn có thể thấy, kiểu nội tuyến sẽ hiển thị. Nó hiển thị tốt trên tất cả các bài kiểm tra litmus ngoại trừ Outlook 2002, 2007 và 2013, trong đó valign = "middle" bị bỏ qua và văn bản liên kết được đẩy lên đầu như sau: http://i.imgur.com/a48ObB8.jpg

Một số nguồn, cả ở đây và ở những nơi khác, gợi ý rằng valign hoạt động trong triển vọng, nhưng tôi đã thử thuộc tính valign="middle" trên mỗi thẻ tôi có thể nghĩ đến, và một số css vertical-align: middle; s là tốt. Điều này không còn đúng? Và nếu như vậy, có một công việc xung quanh một số loại?

Answer 1

Giá trị luôn hoạt động đối với tôi, nhưng tôi cho rằng nó hoạt động trong Outlook 2007, bạn phải đặt chiều cao của <td>. Điều này luôn làm việc cho tôi:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right"> 
    <tr> 
     <td align="center" valign="middle" bgcolor="#b2382a" height="35"> 
      <span style="color:#FFFFFF; 
         font-family: 'Lucida Grande', Arial, sans-serif; 
         font-size:12px; 
         text-transform:uppercase;"> 
       Link Text Here 
      </span> 
     </td> 
    </tr> 
</table> 

Answer 2

Câu trả lời ngắn: Sử dụng đầu đệm và đệm dưới cùng với giá trị âm.

Câu trả lời dài: Nếu bạn muốn viết một email tương thích chéo không sử dụng valign nào cả. Vấn đề của bạn là bắt nguồn từ một nơi khác bởi vì theo mặc định, văn bản sẽ được hiển thị theo chiều dọc ở giữa ô.

Lấy mã của bạn trở lại điểm mà nó đặt ở vị trí trung tâm và bất cứ nơi nào bạn cần sử dụng các bảng lồng nhau, ô, lề và đệm để có được vị trí bạn đang tìm kiếm.

Answer 3

Tôi nghĩ vấn đề là chiều cao dòng bạn đang đặt. Tôi thấy rằng khi chiều cao dòng bằng với chiều cao td, valign = middle sẽ không hoạt động đúng trong triển vọng.

Sau đây sẽ không trung align text:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right"> 
    <tr> 
     <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;"> 
      Link Text Here 
     </td> 
    </tr> 
</table> 

WILL NÀY:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right"> 
    <tr> 
     <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;"> 
      Link Text Here 
     </td> 
    </tr> 
</table> 

Answer 4

Tôi biết rằng câu hỏi này là cũ nhưng tôi muốn chia sẻ một giải pháp cho vấn đề này mà làm việc cho tôi.

Tôi có điều này:

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="600" valign="middle"> 
     Content 
    </td> 
    </tr> 
</table> 

này hoạt động trên hầu hết các khách hàng email, nhưng không phải trên Outlook phiên bản lớn hơn năm 2010. Để làm cho nó hoạt động chính xác chỉ cần thêm một bình luận có điều kiện với một spacer như thế này:

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <!-- In this case is a spacer of 40px --> 
    <!--[if (gt mso 14)]> 
    <tr> 
    <td> 
     <table border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top"> 
      &nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <![endif]--> 
    <tr> 
    <td width="600" valign="middle"> 
     Content 
    </td> 
    </tr> 
</table>