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

93

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?

html-email css-tables Joel Glovier
sumber
2
"margin: 0px auto" .. FYI saja, ketika Anda menggunakan 0apa pun, Anda tidak perlu menentukan unit :)
Matt

Jawaban:

212

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.

Shadi Almosri
sumber
Apakah ada properti CSS yang melakukan hal yang sama? text-align: centertidak melakukan hal yang sama.
Kevin Ghadyani
1
Beberapa penyedia email memerlukan metode pemusatan objek yang sudah tidak digunakan lagi ini. (Saya sedang memikirkan Apple Mail).
Drazzah
84
Ketika Anda membuat kode untuk tata letak email, Anda benar-benar membuat kode seperti tahun 1999.
Kapten Hypertext
Hal ini menyebabkan tabel anak tdjuga berada di tengah di Outlook Web App (OWA), terlepas dari apakah perataan diatur ke leftatau tidak.
Ismael
30

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>
Justus Romijn
sumber
6
Tidak berfungsi jika Anda memusatkan tabel atau elemen level blok lainnya.
Roman
Anda benar, saya tidak yakin apakah margin: 0 auto;didukung (dalam kombinasi dengan a width), tetapi itu biasanya berfungsi untuk browser, tetapi saya tidak yakin apakah klien email cocok dalam situasi itu.
Justus Romijn
2
Ya, saya tidak yakin apakah semua browser akan mendukungnya, jadi gunakan tag <center> yang tepercaya tetapi sudah usang.
Roman
10

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.


sumber
7

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)

pengguna3408238
sumber
1
"Titik" kecil yang tidak terlihat harus diganti dengan mungkin & nbsp; dan instruksi untuk membuat periode kecil yang tak terlihat tidak terlihat harus dihentikan. Saya bahkan tidak bisa mendapatkan email uji coba sendiri dengan pengaturan tersebut karena mereka langsung menuju ke penyedia spam neraka :) Pertahanan malware membuat sesuatu yang berbau amis menjadi lebih mencurigakan ... misalnya: `<td width =" 33% "align = "center" valign = "top"> & nbsp; </td> `
Techmag
6

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

Seb
sumber
5

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.

Trevor Nestman
sumber
Terima kasih, ini berhasil untuk saya. Saya mencoba untuk
memusatkan
2

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>
Anas
sumber
1
Mengapa menggunakan a tableuntuk ini jika hanya akan ada satu baris dan satu kolom? Anda tidak menggunakan fitur tableelemen apa pun.
dg99
Anda menggunakan tabel di email html karena solusi untuk masalah apa pun dengan email html yang akan berfungsi di hampir semua klien entah bagaimana akan melibatkan "tambahkan tabel lain"
user254694