2008-11-19 20 views
85

मैं ब्राउज़र विंडो के केंद्र में निश्चित चौड़ाई की एक तालिका दिखाना चाहता हूं। अब मैंक्षैतिज रूप से तालिका संरेखित करने के लिए सीएसएस तरीका

<table width="200" align="center"> 

लेकिन विजुअल स्टूडियो 2008 इस लाइन पर चेतावनी देता है का उपयोग करें:

गुण 'संरेखित' पुराना माना जाता है। एक नए निर्माण की सिफारिश की है।

एक ही लेआउट प्राप्त करने के लिए तालिका में मुझे किस सीएसएस शैली को लागू करना चाहिए?

+2

तो, अंत में आप किस समाधान के लिए गए थे? –

उत्तर

169

स्टीवन सही है theory में:

एक तालिका का उपयोग करने के लिए "सही" तरीका सीएसएस। यदि बाएं और दाएं मार्जिन बराबर हैं तो अनुरूप ब्राउज़र को केंद्र टेबल होना चाहिए। सबसे आसान तरीका यह पूरा करने के लिए छोड़ दिया और सही मार्जिन सेट करने के लिए है इस प्रकार एक एक शैली पत्रक में लिख सकते हैं "ऑटो।":

table 
{ 
    margin-left: auto; 
    margin-right: auto; 
} 

लेकिन लेख इस जवाब की शुरुआत में उल्लेख किया है कि आप देता है एक टेबल केंद्र करने के लिए सभी अन्य तरीके।

एक सुरुचिपूर्ण सीएसएस पार ब्राउज़र समाधान: यह किसी भी स्पष्ट चौड़ाई की स्थापना के बिना दोनों MSIE 6 (क्वर्क्स और मानक), मोज़िला, ओपेरा और यहां तक ​​कि नेटस्केप 4.x में काम करता है:

div.centered 
{ 
    text-align: center; 
} 

div.centered table 
{ 
    margin: 0 auto; 
    text-align: left; 
} 


<div class="centered"> 
    <table> 
    … 
    </table> 
</div> 
+0

और लेख लिंक के लिए धन्यवाद! –

+0

आप मार्जिन के साथ केंद्र में टेबल प्राप्त कर सकते हैं: 0 ऑटो; आईई 6 और ऊपर में यदि आप सुनिश्चित करते हैं कि आपके पृष्ठ में वैध डिक्टिप घोषणा है। –

+0

@ मार्को: मेरे पास अभी यह जानकारी नहीं है, लेकिन यह स्टैक ओवरफ्लो पर एक प्रश्न के लिए एक अच्छा आधार हो सकता है। – VonC

0
style="text-align:center;" 

(मुझे लगता है कि)

या यदि आप बस इसे अनदेखा कर सकता है, यह अभी भी काम करता है

13

इस प्रयास करें:,

<table width="200" style="margin-left:auto;margin-right:auto"> 
0

यह काम करना चाहिए:

<div style="text-align:center;"> 
    <table style="margin: 0 auto;"> 
    <!-- table markup here. --> 
    </table> 
</div> 
2

सरल। आईई 6 और ऊपर खुशी से आपकी मेज को "मार्जिन: 0 ऑटो" के साथ केंद्रित करेंगे; अगर केवल पृष्ठ "मानकों" मोड में प्रस्तुत करता है। इस तरह के

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

या

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

यह सच है, IE5.5 के रूप में ऐसा आप एक वैध doctype घोषणा की जरूरत बनाने के लिए, और नीचे अभी भी तालिका केंद्रित करने के लिए मना कर देगा, लेकिन शायद आप उस के साथ रह सकते हैं, विशेष रूप से यदि पृष्ठ अभी भी गठबंधन तालिका के साथ कार्यात्मक है। मुझे लगता है कि अब आईई 5.5 और नीचे के उपयोगकर्ताओं को कुछ अजीब दिखने वाली वेबसाइटों के लिए काफी उपयोग किया जाता है - लेकिन आपको अभी भी यह सुनिश्चित करने की ज़रूरत है कि वे दृश्य ग्लिच आपकी साइट को अनुपयोगी नहीं प्रस्तुत करते हैं।

मुबारक कोडिंग!

संपादित करें: क्षमा करें, मुझे शायद यह इंगित करना चाहिए कि आपको आईई 6 प्राप्त करने और "मानकों" प्रतिपादन मोड में "सख्त" सिद्धांत नहीं होना चाहिए। मुझे एहसास हुआ कि यह उपरोक्त पोस्ट किए गए सिद्धांतों के उदाहरणों से ऐसा प्रतीत हो सकता है।उदाहरण के लिए, इस doctype घोषणा निश्चित रूप से समान रूप से काम करेगा:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
0

मैं सिर्फ यह और क्या अंत में मेरे लिए काम किया पहली तीन पंक्तियों के साथ एक मेज बनाने के लिए था सीख रहा हूँ। बाएं और दाएं पंक्तियों के लिए मार्जिन 50% पर सेट करें। फिर केंद्र "टेबल पंक्ति" के "तालिका डेटा" के अंदर एक पंक्ति, निश्चित चौड़ाई तालिका डालें।

0
<style> 
    .abc { 
     text-align: center; 
    } 
</style> 

<table class="abc"> 
    <tr> 
     <td>Item1</td> 
     <td>Item2</td> 
    </tr> 
</table> 
2

हालांकि यह आज की दुनिया में पाखंडी हो सकता है - अतीत में आप निम्नलिखित गैर-सीएसएस कोड करेंगे। यह करने के लिए और आज के ब्राउज़रों लेकिन सहित सब कुछ में काम करता है - जैसा कि मैंने कहा है - यह आज की दुनिया में विधर्म है:

<center> 
<table> 
    ... 
</table> 
</center> 

क्या आप की जरूरत किसी तरह बताने के लिए है कि आप एक मेज केंद्रित करने के लिए चाहते हैं और व्यक्ति है एक पुराने ब्राउज़र का उपयोग कर। फिर तालिका के चारों ओर आदेश "< केंद्र>" डालें। अन्यथा - सीएसएस का उपयोग करें।

हैरानी की बात है - अगर आप शरीर क्षेत्र में सब कुछ केंद्र के लिए चाहते हैं - आप सिर्फ मानक

text-align: center; 

सीएसएस आदेश का उपयोग कर सकते हैं और IE8 में (कम से कम) यह टेबल सहित पृष्ठ पर सब कुछ केंद्रित हो जाएगा।

संबंधित मुद्दे