क्या, वास्तव में, "मार्जिन: 0 ऑटो;" के लिए आवश्यक है काम करने के लिए?

Question

मुझे पता है कि margin: 0 auto;एक तत्व पर सेटिंग का उपयोग इसे (बाएं-दाएं) केंद्र में करने के लिए किया जाता है। हालांकि, मुझे पता है कि तत्व और उसके माता-पिता को काम करने के लिए ऑटो मार्जिन के लिए कुछ मानदंडों को पूरा करना होगा, और मैं कभी भी जादू को सही नहीं मान सकता।

इसलिए मेरा प्रश्न सरल है: margin: 0 auto;बच्चे के बाएं-दाएं केंद्र के लिए सीएसएस गुणों को एक तत्व और उसके माता-पिता पर क्या सेट करना है ?

Comments

यह IE में मेरे लिए ठीक से काम करने के लिए कभी नहीं लगता है ... तो मैं इस बारे में भी उत्सुक हूं।

— एमपीएन

@ मर्क: IE margin: 0 auto;केवल मानक मोड में सही ढंग से काम करेगा ताकि आपको एक सिद्धांत की आवश्यकता हो (जैसे कि पहले किसी की आवश्यकता नहीं थी)।

— BoltClock

Answer 1

मेरे सर के ऊपर से चला गया:

1. तत्व ब्लॉक-स्तरीय होना चाहिए, जैसे display: blockयाdisplay: table
2. तत्व को तैरना नहीं चाहिए
3. तत्व में निश्चित या पूर्ण स्थिति नहीं होनी चाहिए ¹

अन्य लोगों के सिर के ऊपर से:

4. तत्व का होना आवश्यक है जो ²width नहीं हैauto

ध्यान दें कि इन सभी स्थितियों को काम करने के लिए केंद्रित होने वाले तत्व का सच होना चाहिए।

---

¹ _{इसका एक अपवाद है: यदि आपका निश्चित या बिल्कुल तैनात तत्व है left: 0; right: 0, तो यह ऑटो मार्जिन के साथ केंद्र होगा ।}

² _{तकनीकी रूप से, margin: 0 autoएक ऑटो चौड़ाई के साथ काम करता है, लेकिन ऑटो चौड़ाई ऑटो मार्जिन पर पूर्वता लेती है, और ऑटो मार्जिन एक परिणाम के रूप में शून्य हो जाते हैं, ऐसा लगता है जैसे कि वे "काम नहीं करते"।}

Comments

दो 'मेरे सिर के ऊपर से उतर' उत्तर: ओ

— रसेल डायस

निश्चित चौड़ाई जोड़ें और आपको एकदम सही उत्तर मिला

— meo

अरे नहीं! जब मैं दूर कोडिंग कर रहा था तब हर किसी ने जवाब दिया! मेरे सिर के ऊपर से भी ...: O

— काइल

मैं याद आती है ol startविशेषता (और यह Markdown में हटा पाना संभव नहीं है) :(

— BoltClock

@ ट्रायनको: न तो प्रश्न और न ही मेरे उत्तर ने कभी भी HTML प्रस्तुति विशेषताओं के बारे में कुछ भी कहा (प्रश्न [html] को भी टैग नहीं किया गया है), इसलिए मुझे यकीन नहीं है कि आप वास्तव में बैल को बुला रहे हैं। वैसे भी, जबकि सीएसएस के साथ लक्षित किए जा सकने वाले प्रत्येक तत्व में सीएसएस की चौड़ाई और ऊंचाई गुण हो सकते हैं, सभी HTML तत्वों में समान प्रस्तुति गुण नहीं हो सकते हैं, और इसका कारण बस इतना है कि यह उन्हें कुछ पर समझ में नहीं आता है HTML तत्व।

— BoltClock

Answer 2

मेरे सिर के ऊपर से, यह एक की जरूरत है width। आपको उस कंटेनर की चौड़ाई निर्दिष्ट करने की आवश्यकता है जिसे आप केंद्रित कर रहे हैं (मूल चौड़ाई नहीं)।

Comments

सब कुछ हमारे सिर के ऊपर से आ रहा है!

— BoltClock

Answer 3

CSS के लिए पूरा नियम:

1. ( display: blockऔर widthऑटो नहीं) याdisplay: table
2. float: none
3. position: relative

Answer 4

मेरे सिर के ऊपर से, अगर तत्व एक ब्लॉक तत्व नहीं है - तो इसे बनाएं।

और फिर इसे एक चौड़ाई दें।

Answer 5

यह प्रदर्शन के साथ भी काम करेगा: तालिका - इस मामले में एक उपयोगी प्रदर्शन संपत्ति है क्योंकि इसे सेट करने के लिए चौड़ाई की आवश्यकता नहीं है। (मुझे पता है कि यह पोस्ट 5 साल पुरानी है, लेकिन यह अभी भी राहगीरों के लिए प्रासंगिक है;)

Answer 6

मेरी बिल्ली के सिर के ऊपर से, सुनिश्चित करें कि divआप केंद्र के लिए कोशिश कर रहे हैं करने के लिए सेट नहीं है width: 100%।

यदि यह है, तो बाल विभाग पर निर्धारित नियम क्या हैं।

Answer 7

कृपया इस त्वरित उदाहरण पर जाएं मैंने jsFiddle बनाया है । होपफुल यह समझना आसान है। आप wrapperसंरेखित करने के लिए साइट की चौड़ाई के साथ एक div का उपयोग कर सकते हैं । आपके द्वारा डाला जाने वाला कारण यह widthहै कि ब्राउज़र जानता है कि आप तरल लेआउट के लिए नहीं जा रहे हैं।

Answer 8

यहाँ मेरा सुझाव है:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Answer 9

यह शायद दिलचस्प है कि आपको <button>इसे बनाने के लिए किसी तत्व के लिए चौड़ाई निर्दिष्ट करने की आवश्यकता नहीं है - बस यह सुनिश्चित करें कि यह है display:block: http://jsfiddle.net/muhuyttr/

Answer 10

किसी के लिए अभी-अभी इस सवाल से टकराने, और नहीं ठीक करने में सक्षम होने margin: 0 autoके लिए, यहाँ के कुछ मैं आपके लिए उपयोगी हो सकता है की खोज की: एक tableतत्व कोई निर्दिष्ट चौड़ाई के साथ होना आवश्यक है display: tableऔर नहीं display: block के लिए आदेश में margin: autoकाम करने के लिए। यह कुछ के लिए स्पष्ट हो सकता है, के संयोजन के रूप में display: blockऔर डिफ़ॉल्ट widthमान एक तालिका देगा जो इसके कंटेनर को भरने के लिए फैलता है, लेकिन यदि आप चाहते हैं कि तालिका इसे "प्राकृतिक" चौड़ाई ले और केंद्रित हो, तो आपको ज़रूरत हैdisplay: table

Comments

यह सच नहीं है। (हालांकि अगर आप बस इसे देने के display: blockफिर इसे स्वीकार किए जाते हैं जवाब की हालत 4 को पूरा नहीं करेगा)

— क्वेंटिन

@Quentin सिर के लिए धन्यवाद। मेरे मामले में, मैं नहीं चाहता था कि तालिका क्षैतिज स्थान को भरें (जो कि पूरी चर्चा को कम करने के लिए प्रतीत होगी margin: 0 auto) और मैं तालिका की चौड़ाई भी निर्दिष्ट नहीं कर सकता , क्योंकि इसकी सामग्री में अलग-अलग चौड़ाई हो सकती है। इस मामले में, एकमात्र समाधान जो काम करता है (यानी तालिका को सामान्य तरीके से प्रस्तुत करता है लेकिन इसे केंद्र करता है) कोई चौड़ाई नियम नहीं है, display: tableऔरmargin: 0 auto

— सैमसन