HTML में <केंद्र> टैग क्यों अपदस्थ है?


202

मैं बस इस बात से उत्सुक हूं कि <center>HTML में टैग क्यों हटाया गया था।

<center>जल्दी से केंद्र-संरेखित एक में कंटेनर encapsulating द्वारा पाठ के ब्लॉक और छवियों का एक आसान तरीका था <center>टैग, और मैं वास्तव में कैसे अब यह करने के लिए पर कोई आसान तरीका नहीं मिल रहा।

किसी को भी "सामान" (नहीं margin-left:auto; margin-right:auto;और चौड़ाई बात) को केंद्र में रखने के किसी भी सरल तरीके के बारे में पता है , जो कुछ बदलता है <center>? और यह भी, कि इसे अपदस्थ क्यों किया गया?

जवाबों:


232

<center>तत्व पदावनत किया गया क्योंकि यह परिभाषित करता है प्रस्तुति उसकी सारी सामग्री को - यह इसकी सामग्री का विवरण नहीं है।

केंद्रित करने की एक विधि तत्व के गुणों margin-leftऔर margin-rightगुणों को निर्धारित करना है auto, और फिर मूल तत्व की text-alignसंपत्ति को निर्धारित करना है center। यह गारंटी देता है कि तत्व सभी आधुनिक ब्राउज़रों में केंद्रित होगा।


7
हां, सीएसएस सभी प्रस्तुति और डेटा को विभाजित करने के बारे में है।
इवान नेवोस्त्रेव

3
इवान, सीएसएस सभी प्रस्तुति के बारे में है; यह बंटवारे के बारे में नहीं है - जैसा कि इनलाइन शैली के कुछ जवाब यहां प्रदर्शित करते हैं! यह निश्चित रूप से समझदार वर्गों का उपयोग करने के लिए एक बहुत अच्छा विचार है और सीएसएस इनलाइन नहीं है, लेकिन यह प्रस्तुति के लिए सीएसएस का उपयोग करने के लिए एक अलग अवधारणा है।
पीटर बॉटन

15
मेरे पास कुछ मामले हैं (जो मैं ए टी एम को याद नहीं कर सकता) जहां दोनों को सेट करना marginऔर text-alignIE में मेरे तत्व को केंद्र में नहीं रखा था, लेकिन इसे <center>काम के साथ लपेटना ... मैं एक उदाहरण खोजने की कोशिश करूंगा।
मॉटी

12
ऑटो मार्जिन ट्रिक केवल ब्लॉक स्तर के तत्वों के लिए काम करता है। display: block;इनलाइन तत्व पर उपयोग करें ।
स्टीव ग्राहम

88
मुझे यकीन है कि एक विशिष्ट WP या Drupal टेम्पलेट पर सत्रह नेस्टेड divs वास्तव में प्रस्तुति विवरण को अलग करने में मदद करते हैं: P </ troll> (<- देखो, अर्थ टैग!)
15:14

17

W3Schools.com के अनुसार ,

केंद्र तत्व HTML 4.01 में पदावनत किया गया था, और XHTML 1.0 सख्त DTD में समर्थित नहीं है।

एचटीएमएल 4.01 कल्पना टैग का बहिष्कार कर के लिए इस कारण देता है:

CENTER तत्व DIV तत्व को "सेंटर" पर संरेखित विशेषता के साथ निर्दिष्ट करने के बराबर है।


14
मैं तो इच्छा यह वास्तव में सच था।
बैड

61
यह वास्तव में सच है, लेकिन DIV के संरेखित गुण को भी पदावनत किया गया है: D
Oleh Prypin

22
ध्यान दें कि w3schools W3C नहीं है
शोदेव

4
"केंद्र तत्व" केंद्र "के लिए संरेखित विशेषता के साथ DIV तत्व को निर्दिष्ट करने के बराबर है।" इसके अलावा यह टैग को देखकर स्पष्ट है कि यह केंद्रित है। यदि यह एक वैध कारण था, तो हम <strong>, <b>, सभी <h> और अन्य टैग से वंचित कर सकते हैं और कह सकते हैं कि वे कुछ सीएसएस के साथ <span> के समान काम करते हैं। इसके अलावा, एक्सएचटीएमएल भी एचटीएमएल 5 टैग जैसे कि कैनवस को नहीं पहचानता है। यह केवल मार्केज़, सेंटर, टेबल, फ्रेम के खिलाफ युद्ध के कारण हटा दिया गया है जो विशुद्ध रूप से धार्मिक है, क्योंकि इन सभी में एक स्थान है।
दिमित्री

2
@Dmitry <strong> और <h> का अर्थ अर्थ है जो दृश्य स्टाइल से परे है। मुझे लगता है कि अगर <केंद्र> आपके आस-पास था, तो आप इसे सीएसएस के साथ स्टाइल कर सकते हैं, उदाहरण के लिए इसकी सामग्री को न्यायसंगत बनाने के लिए।
निक राइस

16

मैं जो कुछ भी करता हूं वह सामान्य कार्यों जैसे कि केंद्र या फ्लोटिंग करना और सीएसएस कक्षाओं को उनमें से बनाना है। जब मैं ऐसा करता हूं तो मैं उन्हें किसी भी पृष्ठ पर उपयोग कर सकता हूं। मैं एक ही तत्व पर जितने चाहे कॉल कर सकता हूं।

.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}

अब मैं सरल कार्य करने के लिए अपने HTML कोड में उनका उपयोग कर सकता हूं।

<p class="text_center">Some Text</p>

12

मैं अब भी कभी-कभी <केंद्र> टैग का उपयोग करता हूं क्योंकि CSS में कुछ भी काम नहीं करता है। <Div> चाल और असफलता का उपयोग करने की कोशिश करने के उदाहरण:

<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td>&lt;div style="text-align: center;"&gt; didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td>&lt;div style="text-align: center;margin-left:auto;margin-right:auto"&gt; still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with &lt;center&gt; tag</td></tr></table></center>

<केंद्र> परिणाम प्राप्त करता है। इसके बजाय सीएसएस का उपयोग करने के लिए, आपको कभी-कभी सीएसएस को कई स्थानों पर रखना होगा और इसे सही केंद्र में लाने के लिए इसे गड़बड़ाना होगा। आपके प्रश्न का उत्तर देने के लिए, CSS विश्वासियों और अनुयायियों के साथ एक धर्म बन गया है , जिन्होंने <केंद्र> <b> <i> <u> को अपनी नौकरी की सुरक्षा के लिए ईशनिंदा, अपवित्र, और बहुत सरल माना है। और यदि वे आपकी <तालिका> को आपसे दूर ले जाने का प्रयास करते हैं, तो उनसे पूछें कि सीएसएस समतुल्य कोलस्पैन या रोस्पैन विशेषता क्या है।

यह अमूर्त या किताबी सच्चाई नहीं है, बल्कि जीवित सत्य है जो मायने रखता है।
- ज़ेन


आप यह भी इस्तेमाल कर सकते हैंdisplay:flex; justify-content:center; text-align:center
जस्टिन लियू

11

यदि आप चाहें तो आप अभी भी XHTML 1.0 संक्रमणकालीन और HTML 4.01 संक्रमणकालीन के साथ इसका उपयोग कर सकते हैं। केवल दूसरा तरीका (सबसे अच्छा तरीका, मेरी राय में) मार्जिन के साथ है:

<div style="width:200px;margin:auto;">
  <p>Hello World</p>
</div>

आपके HTML को तत्व को परिभाषित करना चाहिए, न कि उसकी प्रस्तुति को नियंत्रित करना।


8

यह इरादा है कि मार्कअप, यानी HTML टैग, अर्थ और संरचना का प्रतिनिधित्व करते हैं, उपस्थिति नहीं। HTML के शुरुआती संस्करणों में इसे बुरी तरह से मिलाया गया था, लेकिन मानक लोग अब इसे साफ करने की कोशिश कर रहे हैं।

टैग नियंत्रण उपस्थिति के साथ एक समस्या यह है कि आपके पृष्ठ विकलांगों के लिए उपकरणों के साथ अच्छी तरह से नहीं खेलते हैं, जैसे कि स्क्रीन रीडर। यह आपके पाठ में बहुत सारे और बहुत सारे टैग होने देता है जो अर्थ को स्पष्ट करने में मदद नहीं करते हैं, बल्कि एक अलग स्तर की जानकारी के साथ इसे अव्यवस्थित करते हैं।

इसलिए CSS को एक अलग भाषा में स्वरूपण / प्रदर्शन को स्थानांतरित करने के लिए सोचा गया था, जो पाठ से अलग है और इसे आसानी से रखा जा सकता है। अन्य बातों के अलावा, यह स्टाइलशीट को दूसरे मार्कअप को छूने के बिना वेब पेज की उपस्थिति को बदलने की अनुमति देता है। और ऐसा करने में सक्षम होने के लिए बहुत सारे पन्नों में एक प्रफुल्लित फूंक है।

CSS ऐसा करने के लिए आपको जो टूल देता है वह हमेशा सुरुचिपूर्ण नहीं होता है, मैं वहां आपकी तरफ हूं। उदाहरण के लिए, प्रभावी ऊर्ध्वाधर केंद्र करने का कोई तरीका नहीं है। और क्षैतिज केंद्रित, अगर यह सिर्फ पाठ के लिए उत्तरदायी नहीं है, तो text-alignज्यादा बेहतर नहीं है।

आपके पास आसान, प्रभावी और शुद्ध या साफ, सुरुचिपूर्ण और बोझिल करने का विकल्प है। मुझे समझ नहीं आ रहा है कि वेब डेवलपर इस गड़बड़ी को क्यों लागू करते हैं, लेकिन मुझे लगता है कि वे कम से कम एक मौका देने के लिए खुश हैं कि उनका सामान हो जाए।


4
+1: किसी ऐसे व्यक्ति के रूप में जो वेब डेवलपर भी नहीं है, मैं पहचानता हूं कि सीएसएस का उपयोग करके कुछ विशिष्ट विशेषताओं को निर्दिष्ट करना कितना बोझिल हो सकता है। मुझे अभी भी संरचनात्मक मार्कअप को तोड़कर सीएसएस का उपयोग करना बेहतर लगता है, लेकिन ... डब्ल्यूटीएफ? उस सीएसएस कल्पना, यादृच्छिक बंदरों को परिभाषित करने के प्रभारी कौन हैं जो उन्होंने कुछ दूरदराज के जंगल में पाए? गंभीरता से।
दान मोल्डिंग

2
कृपया, दूरदराज के जंगलों में यादृच्छिक बंदरों का अपमान न करें!
डेवलेली

7

HTML डेटा को संरचित करने के लिए है, लेआउट को नियंत्रित नहीं करता है। CSS का उद्देश्य लेआउट को नियंत्रित करना है। आप यह भी पाएंगे कि कई डिज़ाइनर <table>इसी कारण से लेआउट के लिए उपयोग करते हैं।



3

CSS में एक text-align: centerसंपत्ति है, और चूंकि यह विशुद्ध रूप से एक दृश्य चीज है, शब्दार्थ नहीं है, इसे सीएसएस को पुनः आरोपित किया जाना चाहिए, न कि HTML को।


1
+1 यह बताने के लिए कि विकल्प के अलावा इसे क्यों निकाला गया।
18

8
लेकिन text-alignकंटेनर की सामग्री को संरेखित करेगा, न कि स्वयं कंटेनर
एंड्रियास ग्रीच

आह, हाँ, अगर यह एक ब्लॉक-स्तरीय तत्व है, तो "ऑटो" पैडिंग करेगा। यदि यह एक इनलाइन तत्व है, तो text-align: centerइसके मूल तत्व का उपयोग करें ।
कीथजग्रेंट

(उफ़, मेरा मतलब था ऑटो मार्जिन, पेडिंग नहीं)
कीथजग्रेंट

@AndreasGrech - दोनों<center> करता है । यह कष्टप्रद व्यापक है।
क्वेंटिन

3

भोजन के लिए सोचा: पाठ से भाषण सिंथेसाइज़र के साथ क्या होगा <center>?


1
शायद "केंद्र" या "केंद्रित" बोलते हैं।
डेववले

जैसा कि यह सीएसएस के पाठ-संरेखण के साथ करेगा: केंद्र; मुझे लगता है।
MSpreij

0

आप इसे अपने सीएसएस में जोड़ सकते हैं और उपयोग कर सकते हैं <div class="center"></div>

.center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

या यदि आप रखना चाहते हैं <center></center>और तैयार होने की स्थिति में इसे अपने सीएसएस में जोड़ें

center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

-1

कम से कम लोकप्रिय जवाब

  1. जरूरी टैग एक बुरा टैग नहीं है;
  2. वहाँ रहे हैं टैग कि प्रस्तुति तर्क के साथ सौदा, centerउनमें से एक है;
  3. एक centerटैग के साथ एक div के रूप में ही नहीं है text-align:center;
  4. तथ्य यह है कि आपके पास कुछ करने का एक और तरीका है जो इसे अमान्य नहीं बनाता है।

मुझे समझाने की क्योंकि यहाँ कुख्यात downvoters हैं जो सोचेंगे कि मैं oldschool HTML4 या कुछ का बचाव कर रहा हूँ। नहीं, मैं नहीं हूँ। लेकिन चारों ओर बहस centerकेवल एक प्रवृत्ति युद्ध है, एक टैग को खोदने का कोई वास्तविक कारण नहीं है जो एक वैध उद्देश्य को अच्छी तरह से कार्य करता है।

तो आइए देखते हैं इसके खिलाफ प्रमुख तर्क।

  • "यह प्रस्तुति का वर्णन करता है, शब्दार्थ का नहीं!"
    नहीं। यह एक तार्किक व्यवस्था का वर्णन करता है - और हां एक डिफ़ॉल्ट उपस्थिति है, जैसे अन्य टैग<p>याजैसे<ul>। लेकिन बिंदु इसके परिवेश के संलग्न भाग का संबंध है। केंद्र का कहना है कि "यह एक ऐसी चीज है जिसे हम दृष्टिगत रूप से अलग स्थिति से अलग करते हैं"।

  • "यह मान्य नहीं है"
    हाँ यह है। यह अभी पदावनत है, जैसा कि बाद में हटाया जा सकता है । अब 15+ साल के लिए। और यह कहीं भी नहीं जा रहा है, जाहिरा तौर पर। ऐसी प्रमुख साइटें हैं जो इस टैग का उपयोग करती हैं क्योंकि यह बहुत पठनीय है और इस बिंदु पर है।

  • "यह एचटीएमएल 5 में समर्थित नहीं है"
    यहवास्तवमें सबसे व्यापक रूप से समर्थित टैगों में से एक है।

  • "इट्स सोल्डस्कूल"
    शॉलेसेज़ ओल्डस्कूल भी हैं। नए तरीके पुराने को अमान्य नहीं करते हैं। आप प्रगतिशील और आधुनिक महसूस करना चाहते हैं: ठीक है। लेकिन इसे कानून मत बनाओ।

  • "यह बेवकूफ / अजीब / लंगड़ा है / आपके बारे में एक कहानी बताता है"
    इनमें से कोई नहीं। यह एक हथौड़ा की तरह है: एक विशिष्ट नौकरी के लिए एक उपकरण। समान कार्य के लिए अन्य उपकरण और समान उपकरण के लिए अन्य कार्य हैं; लेकिन यह एक निश्चित समस्या को हल करने के लिए बनाया गया था और यह समस्या अभी भी आसपास है, इसलिए हम केवल एक समर्पित समाधान का उपयोग कर सकते हैं।

  • "आपको ऐसा नहीं करना चाहिए, क्योंकि, CSS"
    Centering बिल्कुल CSS द्वारा हासिल किया जा सकता है, लेकिन यह सिर्फ एक ही तरीका है, केवल एक ही नहीं, केवल अकेले ही उपयुक्त होने दें। जो कुछ भी समर्थित है, काम कर रहा है और पढ़ने योग्य है उसका उपयोग ठीक होना चाहिए।

टी एल; डॉ:

उपयोग न करने का एकमात्र कारण <center>है क्योंकि लोग आपसे घृणा करेंगे।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.