HTML e-posta içeriğinizi tarayıcı penceresinde (veya e-posta istemcisi önizleme bölmesinde) ortalamanın en iyi yolu nedir?

Normalde margin:0 auto, standart tarayıcı tabanlı içeriğim için 960 kapsayıcı ile birlikte CSS kuralları kullanırım , ancak HTML e-posta oluşturma konusunda yeniyim ve şimdi standart CSS olmadan tarayıcı penceresinde ortalamak istediğim aşağıdaki tasarıma sahibim .

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

E-posta tablosu tasarımınızı bir dış tablo setine sararak ve tbody üzerinde bir width:100%satır içi stil text-align:centerveya bunu yapmak için bunun gibi bir şey kullanarak da başarılabileceğini bir yerde gördüğümü hatırlıyorum.

Bunun için bir en iyi uygulama var mı?

Masayı ortaya hizalayın.

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

"İçeriğinizin" olduğu yerde eğer bir tablo ise, istediğiniz genişliğe ayarlayın ve ortalanmış içeriğe sahip olacaksınız.

Google çalışanları ve eksiksizlik adına:

İşte html e-posta şablonları veya imzaları uygulama acısını yaşamam gerektiğinde her zaman kullandığım bir referans: http://www.campaignmonitor.com/css/

Hepsi olmasa da çoğu için CSS desteği listesi, en çok kullanılan e-posta istemcileri arasında güzel bir şekilde karşılaştırıldı.

Merkezleme için, sadece CSS kullanmaktan çekinmeyin ( alignöznitelik içinde kullanımdan kaldırıldığı için 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" ... bu, sayfanın tablo ortasını hizalar.

Td align = "center" kullanmak, bu td'nin içindeki içeriği ortalar, ortalanmış hizalanmış metin için kullanışlıdır, ancak bazı e-posta istemcilerinde içeriği alt düzey tablolarda ortalayarak sorun yaşarsınız, bu nedenle "kapsayıcınızı" ortalamak için üst düzey bir yöntem olarak td align kullanmak sayfadaki tablo bunu yapmanın yolu değildir. Bunun yerine tablo hizalamayı kullanın.

Yine de% 100 sarmalayıcı tablonuzu, yalnızca gövde için bir sarmalayıcı olarak kullanın, çünkü bazı e-posta istemcileri gövde arka plan renklerini göstermez, ancak bunu% 100 tablosu ile gösterir, bu nedenle gövde renginizi hem gövde hem de 100'e ekleyin % tablosu.

Html e-posta devinin tüm tuhaflıkları hakkında yıllarca devam edebilirim. Söyleyebileceğim tek şey, test testi ve tekrar test. Litmus.com, e-postaları test etmek için harika bir araçtır.

Ne kadar çok yaparsanız, hangi e-posta istemcilerinde neyin işe yaradığını o kadar çok öğreneceksiniz.

Bu yardımcı olur umarım.

İşte kurşun geçirmez çözümünüz:

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

Sadece Deneyin, Biraz dağınık görünüyor, ancak Yahoo postası için yeni Firefox Güncellemesi ile bile çalışıyor. (ana tabloyu bir div ile değiştirdiği için e-postayı ortalamaz)

E-postalardaki CSS bir acıdır. Maalesef tablolara ihtiyacınız olacak çünkü CSS tüm e-posta istemcilerinde büyük ölçüde desteklenmiyor.

Bununla birlikte, XHTML değil, bir HTML Geçiş DOCTYPE kullanın ve kullanın <center>.

Outlook ve Office365 ile mücadele ediyordum. Şaşırtıcı bir şekilde işe yarayan şey şuydu:

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

Yalnızca Microsoft e-posta sorunlarımı çözen bazı önemli şeyleri listeledim.

Tüm e-postalarda güzel görünen bir e-posta oluşturmanın bir acı olduğunu ekleyebilir miyim? Bu web sitesi test etmek için çok güzeldi: https://putsmail.com/

Test e-postanızı göndermek istediğiniz tüm e-postaları listelemenizi sağlar. Kodunuzu doğrudan pencereye yapıştırabilir, düzenleyebilir, gönderebilir ve yeniden gönderebilirsiniz. Bana çok yardımcı oldu.

Bazı durumlarda margin = "0 auto", Outlook 2007, 2010, 2013'te bir html e-postayı ortaya hizalarken hardalı kesmez.

Takip etmeyi dene:

İçeriğinizi style = "table-layout: fixed;" ile başka bir tabloya sarın ve align = "merkez".

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