Apa cara terbaik untuk memusatkan konten email HTML Anda di jendela browser (atau panel pratinjau klien email)?

Saya biasanya menggunakan aturan CSS untuk margin:0 autobersama dengan wadah 960 untuk konten berbasis browser standar saya, tetapi saya baru dalam pembuatan email HTML dan saya memiliki desain berikut yang sekarang ingin saya pusatkan di jendela browser tanpa CSS standar .

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

Sepertinya saya ingat pernah melihat suatu tempat yang juga dapat dilakukan dengan membungkus desain tabel email Anda dalam set tabel luar width:100%dan menggunakan beberapa gaya sebaris untuk text-align:centerdi tbody atau sesuatu seperti ini untuk melakukannya?

Apakah ada praktik terbaik untuk ini?

Sejajarkan tabel ke tengah.

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

Di mana Anda memiliki "konten Anda" jika itu adalah tabel, setel ke lebar yang diinginkan dan Anda akan memiliki konten di tengah.

Untuk googler dan demi kelengkapan:

Berikut adalah referensi yang selalu saya gunakan ketika saya harus melalui kesulitan menerapkan template email html atau tanda tangan: http://www.campaignmonitor.com/css/

Ini adalah daftar dukungan CSS untuk sebagian besar, jika tidak semua, opsi CSS, dibandingkan dengan baik di antara beberapa klien email yang paling sering digunakan.

Untuk pemusatan, silakan gunakan CSS (karena alignatribut sudah tidak digunakan lagi 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" ... ini meratakan tengah tabel halaman.

Menggunakan td align = "center" memusatkan konten di dalam td itu, berguna untuk teks rata tengah, tetapi Anda akan mengalami masalah dengan beberapa klien email yang memusatkan konten di tabel sub level, jadi gunakan td align sebagai metode tingkat atas untuk memusatkan "container" Anda tabel di halaman bukanlah cara untuk melakukannya. Gunakan perataan tabel sebagai gantinya.

Masih menggunakan tabel pembungkus 100% Anda juga, murni sebagai pembungkus untuk badan, karena beberapa klien email tidak menampilkan warna latar belakang badan tetapi akan menampilkannya dengan tabel 100%, jadi tambahkan warna badan Anda ke badan dan 100 % meja.

Saya bisa terus dan terus selama berabad-abad tentang semua kebiasaan dev email html. Yang bisa saya katakan adalah tes tes dan tes lagi. Litmus.com adalah alat yang hebat untuk menguji email.

Semakin banyak Anda melakukan, semakin banyak Anda akan belajar tentang apa yang berhasil di klien email apa.

Semoga ini membantu.

Inilah solusi antipeluru Anda:

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

Coba saja, Kelihatannya agak berantakan, tapi Berhasil Bahkan dengan Pembaruan Firefox baru untuk Yahoo mail. (tidak memusatkan email karena mengganti tabel utama dengan div)

CSS dalam email sangat merepotkan. Sayangnya, Anda mungkin memerlukan tabel, karena CSS tidak terlalu didukung di semua klien email.

Karena itu, gunakan DOCTYPE Transisi HTML, bukan XHTML, dan gunakan <center>.

Saya berjuang dengan Outlook dan Office365. Anehnya, hal yang tampaknya berhasil adalah:

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

Saya hanya mencantumkan beberapa hal utama yang menyelesaikan masalah email Microsoft saya.

Bolehkah saya menambahkan bahwa membuat email yang terlihat bagus di semua email itu menyakitkan. Situs web ini sangat bagus untuk pengujian: https://putsmail.com/

Ini memungkinkan Anda untuk membuat daftar semua email yang ingin Anda kirimi email percobaan. Anda dapat menempelkan kode Anda langsung ke jendela, mengedit, mengirim, dan mengirim ulang. Itu sangat membantu saya.

Dalam beberapa kasus, margin = "0 auto" tidak akan memotong mustard saat meratakan tengah email html di Outlook 2007, 2010, 2013.

Coba yang berikut ini:

Bungkus konten Anda di tabel lain dengan style = "table-layout: fixed;" dan sejajarkan = "tengah".

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