ऑटो मार्जिन पृष्ठ में छवि को केंद्र में नहीं रखते हैं

Question

में इस उदाहरण छवि केंद्रित नहीं है। क्यों? मेरा ब्राउज़र विंडोज़ 7 पर Google Chrome v10 है, IE नहीं।

<img src="/img/logo.png" style="margin:0px auto;"/>

Comments

एक शैली वर्ग का परीक्षण, मैंने पाया कि यह काम नहीं कर रहा था मार्जिन: 0 ऑटो; कुछ परीक्षण के बाद पता चला है कि अगर आप जिस कक्षा का नाम किसी तत्व में जोड़ रहे हैं, उसका नाम उसी तत्व के रूप में है जो काम नहीं करेगा।

— लॉस्टलाइट

Answer 1

जोड़ें display:block;और यह काम करेगा। छवियाँ डिफ़ॉल्ट रूप से इनलाइन होती हैं

स्पष्ट करने के लिए, किसी blockतत्व के लिए डिफ़ॉल्ट चौड़ाई autoनिश्चित रूप से युक्त तत्व की पूरी उपलब्ध चौड़ाई को भरती है।

हाशिये पर सेट करके auto, ब्राउज़र शेष स्थान को margin-leftआधा और अन्य आधे को असाइन करता है margin-right।

Comments

+1 सही होने के लिए। यदि आप margin:autoकिसी वस्तु को प्रवाह में केन्द्रित करने के लिए आवश्यक हैं, तो आप एक विस्तृत उत्तर देंगे । ( display:blockया display:table, position:staticया position:relative, आदि)

— फ्रॉग्ज

@ फ्रॉग सहमत; कुछ स्पष्टीकरण जोड़ा।

— रॉस

इसे पढ़ने वालों को "फ्लोट" जोड़ने के लिए भी उपयोगी हो सकता है क्योंकि किसी भी अन्य प्रकार की फ्लोट आपके मार्जिन ऑटो को नष्ट नहीं करेगी।

— कोड व्हिस्परर

लेकिन यह अभी भी केंद्रित नहीं है। यह केवल क्षैतिज रूप से केंद्रित है। मैं इसे खड़ी केंद्रित करने के लिए चाहते हैं, लेकिन यहां तक कि अगर मैं बदल 0px autoकरने के लिए सिर्फ autoयह अभी भी काम नहीं करता है।

— एरोन फ्रेंके

Answer 2

कुछ परिस्थितियों में और विरासत (जैसे आईई, छिपकली, वेबकिट के पिछले संस्करणों के रूप में), के साथ तत्वों position:relative;की रोकथाम करेगा margin:0 auto;काम करने से, भले ही top, right, bottom, और leftसेट नहीं हैं।

तत्व को position:static;(डिफ़ॉल्ट) पर सेट करना इन परिस्थितियों में इसे ठीक कर सकता है। आम तौर पर, एक निर्दिष्ट चौड़ाई वाले ब्लॉक स्तर के तत्व या margin:0 auto;तो स्थिति relativeया staticस्थिति का उपयोग करके सम्मान करेंगे ।

Comments

margin: 0 autoजब तक वे कोई फ़्लोट और एक निर्दिष्ट चौड़ाई वाले ब्लॉक तत्व नहीं होते हैं, तब तक अपेक्षाकृत तैनात तत्वों पर ठीक काम करता है ...

— एनएनयूई

मुझे लगता है कि कटाक्ष है। यदि आप अपना उत्तर संपादित करते हैं ताकि यह गलत न हो तो मैं नीचे को हटा दूंगा। मैं लगभग 15 वर्षों से सीएसएस लिख रहा हूं और कभी भी ऑटो मार्जिन को याद नहीं कर सकता कि वे क्षैतिज रूप से केंद्र में स्थिर नियत चौड़ाई तत्वों पर काम नहीं कर रहे हैं - हालांकि अन्य गुण जैसे floatऔर displayउस व्यवहार को बदल सकते हैं।

— एननुई

Answer 3

आप ऑटो चौड़ाई div का उपयोग कर केंद्र कर सकते हैं display:table;

div{
margin: 0px auto;
float: none;
display: table;
}

Comments

यह काम करता है, और मुझे पता नहीं क्यों। क्या आप समझाएँगे?

— ThatsJustCheesy

मैंने पहले कभी इसका उपयोग नहीं किया है, लेकिन यह अब मेरे लिए काम करता है।

— २०:४०

Answer 4

मेरे मामले में समस्या यह थी कि मैंने बिना चौड़ाई के न्यूनतम और अधिकतम चौड़ाई निर्धारित की थी ।

Comments

पुनरावृत्ति करने के लिए: तत्व होना चाहिए position:static, एक निश्चित width:सेट होना चाहिए और एक display:blockतत्व होना चाहिए

— जॉय टी

यह मेरे लिए भी चौड़ाई का मुद्दा था - बूटस्ट्रैप ने स्वचालित रूप से 100% उपलब्ध उपयोग करने के लिए मेरी डिव सेट की

— एडमंड सुल्जानोक

Answer 5

जब भी हम चौड़ाई जोड़ते हैं और जोड़ते हैं margin:auto, मुझे लगता है कि यह काम नहीं करेगा। यह मेरे अनुभव से है। चौड़ाई यह विचार देती है कि वास्तव में इसे समान मार्जिन प्रदान करने की आवश्यकता है।

Answer 6

इसके लिए एक विकल्प है margin-left:auto; margin-right: auto;या margin:0 auto;जो इसका उपयोग करता है वह position:absolute;यह है:
आप तत्व की बाईं स्थिति को 50% ( left:50%;) पर सेट करते हैं, लेकिन यह तत्व को सही ढंग से केंद्रित करने के लिए इसे सही ढंग से केंद्रित नहीं करेगा, आपको इसे देने की आवश्यकता है यह की चौड़ाई के शून्य से आधे का मार्जिन, जो आपके तत्व को पूरी तरह से केंद्र में रखेगा

यहाँ एक उदाहरण है: http://jsfiddle.net/35ERq/3/

Answer 7

बूटस्ट्रैप बटन के लिए:

display: table; 
margin: 0 auto;

Answer 8

इसे शरीर की सीएसएस में डालें: पृष्ठभूमि: # 3D668F; फिर जोड़ें: प्रदर्शन: ब्लॉक; मार्जिन: ऑटो; img की सीएसएस के लिए।