วิธีใดที่ดีที่สุดในการจัดกึ่งกลางเนื้อหาอีเมล HTML ของคุณในหน้าต่างเบราว์เซอร์ (หรือบานหน้าต่างแสดงตัวอย่างไคลเอ็นต์อีเมล)

โดยปกติฉันจะใช้กฎ CSS margin:0 autoร่วมกับคอนเทนเนอร์ 960 สำหรับเนื้อหาที่ใช้เบราว์เซอร์มาตรฐานของฉัน แต่ฉันยังใหม่กับการสร้างอีเมล HTML และฉันมีการออกแบบต่อไปนี้ซึ่งตอนนี้ฉันต้องการจัดกึ่งกลางในหน้าต่างเบราว์เซอร์โดยไม่มี CSS มาตรฐาน .

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

ฉันจำได้ว่าเคยเห็นที่ไหนสักแห่งที่สามารถทำได้โดยการตัดการออกแบบตารางอีเมลของคุณไว้ในตารางด้านนอกที่ตั้งไว้width:100%และใช้สไตล์อินไลน์สำหรับtext-align:centerบนร่างกายหรืออะไรทำนองนี้เพื่อทำ

มีแนวทางปฏิบัติที่ดีที่สุดสำหรับสิ่งนี้หรือไม่?

จัดโต๊ะให้อยู่ตรงกลาง

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

ในกรณีที่คุณมี "เนื้อหาของคุณ" หากเป็นตารางให้ตั้งค่าตามความกว้างที่ต้องการและคุณจะมีเนื้อหาที่อยู่กึ่งกลาง

สำหรับ Googler และความสมบูรณ์:

นี่คือข้อมูลอ้างอิงที่ฉันใช้เสมอเมื่อต้องเผชิญกับความเจ็บปวดในการใช้เทมเพลตอีเมลหรือลายเซ็น html: http://www.campaignmonitor.com/css/

ฉันไม่ใช่รายการการสนับสนุน CSS สำหรับตัวเลือก CSS ส่วนใหญ่ถ้าไม่ใช่ทั้งหมดเปรียบเทียบกันอย่างดีระหว่างไคลเอนต์อีเมลที่ใช้มากที่สุด

สำหรับการจัดกึ่งกลางอย่าลังเลที่จะใช้ CSS (เนื่องจากalignแอตทริบิวต์เลิกใช้งานแล้ว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" ... สิ่งนี้จะจัดแนวตรงกลางตารางของหน้า

การใช้ td align = "center" จัดกึ่งกลางเนื้อหาภายใน td นั้นมีประโยชน์สำหรับข้อความที่จัดแนวกึ่งกลาง แต่คุณจะมีปัญหากับไคลเอนต์อีเมลบางตัวที่จัดเนื้อหาไว้ที่กึ่งกลางในตารางระดับย่อยดังนั้นการใช้ td align เป็นวิธีระดับบนสุดในการจัด "คอนเทนเนอร์" ของคุณให้อยู่กึ่งกลาง ตารางบนหน้าเว็บไม่ใช่วิธีการทำ ใช้การจัดแนวตารางแทน

ยังคงใช้ตารางกระดาษห่อหุ้ม 100% ของคุณด้วยเช่นกันโดยเป็นกระดาษห่อหุ้มสำหรับเนื้อหาเนื่องจากไคลเอนต์อีเมลบางรายไม่แสดงสีพื้นหลังของเนื้อหา แต่จะแสดงพร้อมกับตาราง 100% ดังนั้นให้เพิ่มสีร่างกายของคุณให้กับทั้งร่างกายและ 100 % ตาราง.

ฉันสามารถดำเนินการต่อไปเรื่อย ๆ เกี่ยวกับนิสัยใจคอทั้งหมดของ html email dev ทั้งหมดที่ฉันพูดได้คือการทดสอบทดสอบและทดสอบอีกครั้ง Litmus.com เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการทดสอบอีเมล

ยิ่งคุณทำมากเท่าไหร่คุณก็จะได้เรียนรู้เกี่ยวกับสิ่งที่ใช้ได้ผลในไคลเอนต์อีเมล

หวังว่านี่จะช่วยได้

นี่คือโซลูชันกันกระสุนของคุณ:

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

เพียงแค่ลองใช้งานดูยุ่งเล็กน้อย แต่ใช้งานได้แม้กับ Firefox Update ใหม่สำหรับ Yahoo mail (ไม่ได้จัดกึ่งกลางอีเมลเนื่องจากแทนที่ตารางหลักด้วย div)

CSS ในอีเมลเป็นความเจ็บปวด คุณอาจต้องใช้ตารางเนื่องจาก CSS ไม่ได้รับการสนับสนุนอย่างมากในไคลเอนต์อีเมลทั้งหมด

ที่กล่าวว่าใช้ HTML DOCTYPE เฉพาะกาลไม่ XHTML, <center>และการใช้งาน

ฉันกำลังดิ้นรนกับ Outlook และ Office365 น่าแปลกใจที่สิ่งที่ดูเหมือนจะได้ผลคือ:

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

ฉันระบุเฉพาะสิ่งสำคัญบางอย่างที่สามารถแก้ไขปัญหาอีเมล Microsoft ของฉันได้

ฉันอาจจะเพิ่มว่าการสร้างอีเมลที่ดูดีในทุกอีเมลนั้นเป็นความเจ็บปวด เว็บไซต์นี้ดีมากสำหรับการทดสอบ: https://putsmail.com/

ช่วยให้คุณสามารถแสดงรายการอีเมลทั้งหมดที่คุณต้องการส่งอีเมลทดสอบไปได้ คุณสามารถวางรหัสของคุณลงในหน้าต่างแก้ไขส่งและส่งใหม่ได้ทันที มันช่วยให้ฉันตัน

ในบางกรณี margin = "0 auto" จะไม่ตัดมัสตาร์ดเมื่อจัดกึ่งกลางอีเมล html ใน Outlook 2007, 2010, 2013

ลองทำดังต่อไปนี้:

รวมเนื้อหาของคุณในตารางอื่นด้วย style = "table-layout: fixed;" และ 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>