ब्राउज़र विंडो (या ईमेल क्लाइंट पूर्वावलोकन फलक) में अपनी HTML ईमेल सामग्री को केंद्र में रखने का सबसे अच्छा तरीका क्या है?

Question

मैं सामान्य रूप से margin:0 autoअपने मानक ब्राउज़र आधारित सामग्री के लिए 960 कंटेनर के साथ CSS नियमों का उपयोग करता हूं, लेकिन मैं HTML ईमेल निर्माण के लिए नया हूं और मुझे निम्नलिखित डिज़ाइन मिला है जो मैं अब बिना मानक सीएसएस के ब्राउज़र विंडो में केंद्र करना चाहूंगा ।

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

मुझे यह याद आता है कि कहीं न कहीं यह याद है कि यह आपके ईमेल टेबल डिज़ाइन को बाहरी टेबल पर सेट करके width:100%और इनलाइन स्टाइल के लिए इनलाइन स्टाइल का उपयोग करके text-align:centerया इसे करने के लिए कुछ इस तरह पूरा कर सकता है?

क्या इसके लिए सबसे अच्छा अभ्यास है?

Comments

"मार्जिन: 0px ऑटो" .. सिर्फ FYI करें, जब आप 0किसी भी चीज़ का उपयोग करते हैं, तो आपको एक यूनिट निर्दिष्ट करने की आवश्यकता नहीं है :)

— मैट

Answer 1

तालिका को केंद्र में संरेखित करें।

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

यदि आपके पास "आपकी सामग्री" है यदि यह एक तालिका है, तो इसे वांछित चौड़ाई पर सेट करें और आपके पास केंद्रित सामग्री होगी।

Comments

क्या सीएसएस संपत्ति है जो एक ही काम करती है? text-align: centerएक ही काम नहीं कर रहा है।

— Sawtaytoes

कुछ ईमेल प्रदाताओं को वस्तुओं को केंद्रित करने की इस पदावनत विधि की आवश्यकता होती है। (मैं ऐप्पल मेल के बारे में सोच रहा हूं)।

— दारूजाह

जब आप ईमेल लेआउट के लिए कोड करते हैं, तो आप शाब्दिक रूप से 1999 की तरह कोड होते हैं।

— कैप्टन हाइपरटेक्स्ट

यह चाइल्ड टेबल को tdआउटलुक वेब ऐप (ओडब्ल्यूए) में केंद्रित करने का कारण बनता है , भले ही उनके पास संरेखण सेट हो leftया न हो।

— इश्माएल

Answer 2

गोगलर्स और संपूर्णता के लिए:

यहां एक संदर्भ है जिसका उपयोग मैं हमेशा करता हूं जब मुझे HTML ईमेल-टेम्प्लेट या हस्ताक्षर लागू करने के दर्द से गुजरना पड़ता है: http://www.campaignmonitor.com/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>

Comments

यदि आप किसी तालिका या अन्य ब्लॉक-स्तरीय तत्व को केंद्र में रख रहे हैं तो यह काम नहीं करता है।

— रोमन

आप सही हैं, मुझे यकीन नहीं है कि अगर margin: 0 auto;समर्थन किया गया है (एक के साथ संयोजन में width), लेकिन यह आमतौर पर ब्राउज़रों के लिए काम करता है, लेकिन मुझे यकीन नहीं है कि ईमेल-क्लाइंट उस स्थिति में भी आते हैं।

— जस्टस रोमिज़न

हाँ, मुझे यकीन नहीं था कि सभी ब्राउज़र इसका समर्थन करेंगे तो भरोसेमंद लेकिन पदावनत हो गए <केंद्र> टैग के साथ।

— रोमन

Answer 3

तालिका संरेखित करें = "केंद्र" ... यह पृष्ठ के तालिका केंद्र को संरेखित करता है।

Td align = "center" का उपयोग करके उस td के अंदर की सामग्री को केंद्र में रखा गया है, जो संरेखित पाठ के लिए उपयोगी है, लेकिन आपके पास कुछ ईमेल क्लाइंट के साथ सब-लेवल टेबल में सामग्री को केंद्रित करने के मुद्दे होंगे, इसलिए अपने "कंटेनर" को केंद्रित करने के शीर्ष स्तर के तरीके के रूप में td संरेखित का उपयोग करें। पृष्ठ पर तालिका ऐसा करने का तरीका नहीं है। इसके बजाय तालिका संरेखित करें।

फिर भी अपनी 100% आवरण तालिका का उपयोग करें, विशुद्ध रूप से शरीर के लिए एक आवरण के रूप में, क्योंकि कुछ ईमेल क्लाइंट शरीर की पृष्ठभूमि के रंग प्रदर्शित नहीं करते हैं, लेकिन यह 100% तालिका के साथ दिखाई देगा, इसलिए अपने शरीर का रंग शरीर और 100 दोनों में जोड़ें % सारणी।

मैं HTML ईमेल देव के सभी quirks के बारे में उम्र के लिए और पर जा सकते हैं। मैं केवल इतना कह सकता हूं कि परीक्षण परीक्षण और परीक्षण फिर से है। Litmus.com ईमेल के परीक्षण के लिए एक महान उपकरण है।

आप जितना अधिक करेंगे, उतना ही जानेंगे कि किस ईमेल क्लाइंट में क्या काम होता है।

उम्मीद है की यह मदद करेगा।

Answer 4

यहाँ आपका बुलेटप्रूफ समाधान है:

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

बस इसे आज़माएं, थोड़ा गड़बड़ लग रहा है, लेकिन यह याहू मेल के लिए नए फ़ायरफ़ॉक्स अपडेट के साथ भी काम करता है। (ईमेल को केंद्र में नहीं रखता है क्योंकि मुख्य तालिका को div द्वारा प्रतिस्थापित किया जाता है)

Comments

छोटे अदृश्य "अवधि" को शायद & nbsp के साथ प्रतिस्थापित किया जाना चाहिए; और छोटे अदृश्य काल को अदृश्य बनाने के निर्देश को छोड़ देना चाहिए। मैं उन सेटिंग्स के साथ खुद के माध्यम से एक परीक्षण ईमेल भी प्राप्त नहीं कर सका क्योंकि वे सीधे मेरे प्रदाताओं स्पैम नरक में चले गए :) मालवेयर डिफेंस कुछ गड़बड़ कर रहे हैं यहां तक ​​कि मछली की गंध भी ... उदाहरण के लिए: `<td चौड़ाई =" 33% "संरेखित करें = "केंद्र" मान्य = "शीर्ष"> & nbsp; </ td> `

— टेकमैग

Answer 5

ईमेल में सीएसएस एक दर्द है। आपको संभवतः दुर्भाग्यवश तालिकाओं की आवश्यकता होगी, क्योंकि सभी ईमेल क्लाइंट में CSS बहुत समर्थित नहीं है।

कहा कि, HTML ट्रांस्फ़ॉर्म DOCTYPE का उपयोग करें, एक्सएचटीएमएल का नहीं और उपयोग करें <center>।

Answer 6

मैं आउटलुक और ऑफिस 365 से जूझ रहा था। हैरानी की बात यह है कि काम करने के लिए लग रहा था:

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

मैंने केवल कुछ प्रमुख चीजें सूचीबद्ध की हैं जो मेरे Microsoft ईमेल मुद्दों को हल करती हैं।

क्या मैं उस ईमेल को जोड़ सकता हूँ जो सभी ईमेल पर अच्छा लगता है एक दर्द है। यह वेबसाइट परीक्षण के लिए सुपर अच्छी थी: https://putsmail.com/

यह आपको उन सभी ईमेलों को सूचीबद्ध करने की अनुमति देता है, जिन्हें आप अपना परीक्षण ईमेल भेजना चाहते हैं। आप अपने कोड को विंडो में दाईं ओर पेस्ट कर सकते हैं, संपादित कर सकते हैं, भेज सकते हैं और भेज सकते हैं। इसने मुझे एक टन की मदद की।

Comments

धन्यवाद, यह मेरे लिए काम किया। मैं केंद्र के लिए मैं में दृष्टिकोण प्रकाशक का उपयोग कर बनाई ईमेल टेम्पलेट कोशिश कर रहा था

— anandhu

Answer 7

कुछ मामलों में मार्जिन = "0 ऑटो" सरसों को नहीं काटेगा जब केंद्र आउटलुक 2007, 2010, 2013 में एक html ईमेल संरेखित करेगा।

निम्नलिखित का प्रयास करें:

अपनी सामग्री को शैली के साथ किसी अन्य तालिका में लपेटें = "तालिका-लेआउट: निश्चित;" और संरेखित करें = "केंद्र"।

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

Comments

tableअगर इसके लिए केवल एक पंक्ति और एक कॉलम होने जा रहा है, तो इसके लिए उपयोग क्यों करें ? आप tableतत्व की किसी भी विशेषता का उपयोग नहीं कर रहे हैं ।

— dg99

आप html ईमेल में एक तालिका का उपयोग करते हैं क्योंकि html ईमेल के साथ किसी भी समस्या का समाधान जो लगभग सभी ग्राहकों के लिए काम करेगा किसी भी तरह "एक और तालिका जोड़ें"

— user254694