Cách tốt nhất để căn giữa nội dung email HTML của bạn trong cửa sổ trình duyệt (hoặc ngăn xem trước ứng dụng email) là gì?

Tôi thường sử dụng các quy tắc CSS margin:0 autocùng với vùng chứa 960 cho nội dung dựa trên trình duyệt tiêu chuẩn của mình, nhưng tôi chưa quen với việc tạo email HTML và tôi đã có thiết kế sau đây mà tôi muốn căn giữa trong cửa sổ trình duyệt mà không có CSS ​​chuẩn .

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

Dường như tôi nhớ lại đã thấy ở đâu đó rằng nó cũng có thể được thực hiện bằng cách gói thiết kế bảng email của bạn trong một bảng bên ngoài width:100%và sử dụng một số kiểu nội tuyến cho text-align:centertrên tbody hoặc một cái gì đó tương tự để làm điều đó?

Có phương pháp nào tốt nhất cho việc này không?

Căn chỉnh bảng cho chính giữa.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

Nơi bạn có "nội dung của bạn" nếu đó là một bảng, hãy đặt nó thành chiều rộng mong muốn và bạn sẽ có nội dung được căn giữa.

Vì lợi ích của người google và sự hoàn chỉnh:

Dưới đây là tài liệu tham khảo mà tôi luôn sử dụng khi tôi cần phải thực hiện các mẫu email hoặc chữ ký html: http://www.campaignmonitor.com/css/

Tôi có một danh sách hỗ trợ CSS cho hầu hết, nếu không phải tất cả, các tùy chọn CSS, được so sánh độc đáo giữa một số ứng dụng email được sử dụng nhiều nhất.

Để căn giữa, vui lòng chỉ sử dụng CSS (vì alignthuộc tính này không được dùng nữa HTML 4.01).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>

table align = "center" ... điều này căn chỉnh giữa trang của bảng.

Sử dụng td align = "center" căn giữa nội dung bên trong td đó, hữu ích cho văn bản được căn giữa nhưng bạn sẽ gặp vấn đề với một số ứng dụng email khách căn giữa nội dung trong bảng cấp phụ, vì vậy hãy sử dụng td align như một phương pháp cấp cao nhất để căn giữa "vùng chứa" của bạn bảng trên trang không phải là cách để làm điều đó. Sử dụng căn chỉnh bảng để thay thế.

Vẫn sử dụng bảng trình bao bọc 100% của bạn, hoàn toàn như một trình bao bọc cho nội dung, vì một số ứng dụng email khách không hiển thị màu nền nội dung nhưng nó sẽ hiển thị nó với bảng 100%, vì vậy hãy thêm màu nội dung của bạn vào cả nội dung và 100 % bàn.

Tôi có thể nói đi nói lại về tất cả những điều kỳ quặc của nhà phát triển email html. Tất cả những gì tôi có thể nói là kiểm tra thử nghiệm và kiểm tra lại. Litmus.com là một công cụ tuyệt vời để kiểm tra email.

Bạn càng làm nhiều, bạn sẽ càng học được nhiều hơn về những gì hoạt động trong những gì ứng dụng email.

Hi vọng điêu nay co ich.

Đây là giải pháp chống đạn của bạn:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td width="35%" align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

Chỉ cần dùng thử, trông hơi lộn xộn, nhưng nó hoạt động ngay cả với Bản cập nhật Firefox mới cho Yahoo mail. (không căn giữa email vì thay thế bảng chính bằng một div)

CSS trong email là một vấn đề. Rất tiếc, bạn có thể cần các bảng, vì CSS không được hỗ trợ nhiều trong tất cả các ứng dụng email.

Điều đó nói rằng, hãy sử dụng DOCTYPE chuyển tiếp HTML, không phải XHTML và sử dụng <center>.

Tôi đã gặp khó khăn với Outlook và Office365. Đáng ngạc nhiên là điều dường như hoạt động là:

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

Tôi chỉ liệt kê một số điều chính đã giải quyết các vấn đề về email Microsoft của tôi.

Tôi có thể nói thêm rằng việc xây dựng một email trông đẹp trên tất cả các email là một điều khó khăn. Trang web này rất đẹp để thử nghiệm: https://putsmail.com/

Nó cho phép bạn liệt kê tất cả các email bạn muốn gửi email thử nghiệm của mình. Bạn có thể dán mã của mình ngay vào cửa sổ, chỉnh sửa, gửi và gửi lại. Nó đã giúp tôi rất nhiều.

Trong một số trường hợp, margin = "0 auto" sẽ không cắt ngang khi căn giữa email html trong Outlook 2007, 2010, 2013.

Hãy thử những cách sau:

Gói nội dung của bạn trong một bảng khác với style = "table-layout: fixed;" và align = "center".

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>