2014-06-26 9 views
5

बस एक त्वरित सवाल है कि मेरे मन गुस्सा दिलाना था: क्योंप्रदर्शन के साथ मार्जिन 0 ऑटो कार्यों के साथ क्यों केंद्रित है: ब्लॉक लेकिन डिस्प्ले के साथ काम नहीं करता है: इनलाइन-ब्लॉक?

margin:0 auto 

साथ केंद्रित

display:block 

साथ काम ठीक करता है लेकिन एक div केंद्र नहीं है जब प्रदर्शन

display:inline-block 
पर सेट है

उत्तर के लिए धन्यवाद

+3

एक इनलाइन-ब्लॉक तत्व पाठ के एक शब्द की तरह थोड़ा व्यवहार करता है। यह अन्य इनलाइन वस्तुओं के साथ इनलाइन बैठता है। यदि आप उन्हें केंद्रित करना चाहते हैं, तो आपको * कंटेनर * को 'टेक्स्ट-एलाइन' पर सेट करना होगा: केंद्र; ' –

+0

@ ralph.m उत्तर क्यों नहीं दे रहा है? -_- – knitevision

+0

दिलचस्प। मैं इसे एक न्युअंस के रूप में मानता हूं, क्योंकि जब मैं अलग-अलग डिस्प्ले पैरामीटर के साथ divs का परीक्षण कर रहा था और चीजों को कल्पना करने में मदद करने के लिए एक सीमा, प्रदर्शन: ब्लॉक इनलाइन ब्लॉक की तरह काम करता था (इसके कंटेनर की पूरी चौड़ाई नहीं ले रहा था। अजीब ...) । हालांकि, जैसा कि मैंने पहले कहा है, केवल प्रदर्शन के साथ: ब्लॉक मार्जिन के साथ केंद्र करना संभव था: 0 ऑटो। –

उत्तर

4

मेरी समझ निम्नानुसार है (आप gh मुझे सही होने में खुशी है)।

  • इनलाइन तत्वों चौड़ाई संपत्ति की जरूरत नहीं है, और इसलिए "ऑटो" की गणना नहीं की जा सकती है।
  • ब्लॉक तत्वों की चौड़ाई संपत्ति होती है, इसलिए "ऑटो" की चौड़ाई की गणना की जा सकती है।
  • इनलाइन-ब्लॉक तत्वों में एक बाहरी है जो इनलाइन कार्य करता है, लेकिन एक अंदर जो ब्लॉक की तरह कार्य करता है। इस प्रकार, चौड़ाई सेट एक इनलाइन तत्व में किसी शब्द की चौड़ाई की तरह कार्य करता है।
+0

मैं पाठ चरित्र ब्लॉक के संदर्भ को समझता हूं। उनकी चौड़ाई सामग्री के साथ विस्तार, निश्चित रूप से। हालांकि, मुझे समझ में नहीं आया कि 'इनलाइन-ब्लॉक तत्वों के बाहर क्या मतलब है जो एक इनलाइन है, लेकिन एक अंदर जो ब्लॉक की तरह कार्य करता है।' ? इस मामले में 'बाहर' या 'अंदर' क्या है? –

+0

इसके अंदर एक ब्लॉक तत्व के साथ एक इनलाइन तत्व की कल्पना करें। बाहर से, मेरा मतलब इनलाइन तत्व है। आपके द्वारा लागू कोई भी सीएसएस ब्लॉक तत्व में जोड़ा जाता है। इनलाइन-ब्लॉक एक प्रकार के रूप में कार्य करने वाले दो तत्वों का प्रकार है। –

+0

स्पेक रॉब प्रदान करता है शायद स्पष्ट है :) –

-1

inline-block तत्व दाएं या बाएं हाशिए का सम्मान नहीं करते हैं, इसलिए auto सेटिंग लागू नहीं की जा सकती है।

block तत्व सभी मार्जिन का सम्मान करते हैं।

+1

वे सम्मान मार्जिन करते हैं। वे ऑटो की गणना करने में असमर्थ हैं। –

+0

आह, मेरी गलती। –

-1

आपको क्या हो रहा है यह देखने के लिए inline boxes (ब्लॉक नहीं) के बारे में जानने की आवश्यकता है। एक इनलाइन बॉक्स में टेक्स्ट और छवियों जैसे इनलाइन आइटम होते हैं। एक इनलाइन ब्लॉक इनलाइन बॉक्स के भीतर अपनी स्थिति बनाए रखता है लेकिन बॉक्स के अंदर अपनी स्थिति के भीतर ब्लॉक तत्व के रूप में कार्य करता है। पाठ में एक शब्द की तरह इसकी अपनी चौड़ाई नहीं हो सकती है, न ही इनलाइन ब्लॉक हो सकता है।

The actual spec for line boxes.

+0

मुझे यह समझाने के प्रयास के लिए धन्यवाद। मैं इसमें एक हुक ले जाऊंगा। –

4

देखें http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

ब्लाकों:

10.3.3 ब्लॉक स्तर के, सामान्य प्रवाह में गैर प्रतिस्थापित तत्वों

निम्नलिखित बाधाओं इस्तेमाल किया मूल्यों के बीच होने चाहिए जिसे अन्य गुण:

'मार्जिन-बाएं' + 'सीमा-बाएं-चौड़ाई' + 'पैडिंग-बाएं' + 'चौड़ाई' + 'पैडिंग-दाएं' + 'सीमा-दाएं-चौड़ाई' + 'मार्जिन-दाएं' = की चौड़ाई ब्लॉक

यदि 'चौड़ाई' नहीं है 'ऑटो' और 'सीमा-बाएं-चौड़ाई' + 'पैडिंग-बाएं' + 'चौड़ाई' + 'पैडिंग-दाएं' + 'सीमा-दाएं-चौड़ाई' (प्लस कोई भी 'मार्जिन-बाएं' या 'मार्जिन-दाएं' जो 'ऑटो' नहीं हैं) से अधिक ब्लॉक वाले ब्लॉक की चौड़ाई है, तो 'मार्जिन-बाएं' या 'मार्जिन-दाएं' के लिए कोई 'ऑटो' मान निम्नलिखित नियमों के लिए, शून्य के रूप में का इलाज किया गया है।

तो ऊपर के सभी एक गणना 'ऑटो' के अलावा अन्य मूल्य है, मूल्यों कहा जाता है करने के लिए "पर विवश" और इस्तेमाल मूल्यों में से एक इसका परिकलित मान से अलग हो जाना होगा। यदि 'दिशा' युक्त ब्लॉक की संपत्ति में 'ltr' मान है, तो निर्दिष्ट ''मार्जिन-दाएं' के मान को अनदेखा किया जाता है और समानता को सत्य बनाने के लिए मान की गणना के रूप में की जाती है। यदि 'दिशा' का मान 'आरटीएल' है, तो यह इसके बजाय 'मार्जिन-बाएं' होता है।

यदि 'ऑटो' के रूप में निर्दिष्ट एक मान है, तो इसका उपयोग मूल्य समानता से होता है।

यदि 'चौड़ाई' को 'ऑटो' पर सेट किया गया है, तो कोई अन्य 'ऑटो' मान '0' और 'चौड़ाई' परिणामी समानता से होता है।

यदि दोनों 'मार्जिन-बाएं' और 'मार्जिन-दाएं' 'ऑटो' हैं, तो उनके उपयोग किए गए मान बराबर हैं। यह क्षैतिज रूप से युक्त ब्लॉक के किनारों के संबंध में तत्व को केंद्रित करता है।

इनलाइन-ब्लॉक:

10.3.9 'इनलाइन-ब्लॉक', सामान्य प्रवाह में गैर प्रतिस्थापित तत्वों

यदि 'चौड़ाई' 'ऑटो' है, का इस्तेमाल किया मूल्य है फ़्लोटिंग तत्वों के लिए सिकुड़-टू-फिट चौड़ाई।

'मार्जिन-बाएं' या 'मार्जिन-दाएं' के लिए 'ऑटो' का एक गणना मूल्य '0' का उपयोग किया गया मान बन जाता है।

0

मुझे लगता है कि मैं थोड़ी देर हो चुकी इस पर जवाब देने हूँ, लेकिन आप इस समस्या के समाधान प्राप्त कर सकते हैं यदि आप पाठ में ...

के रूप में शरीर में संरेखित निर्दिष्ट करके इनलाइन ब्लॉक के साथ मार्जिन ऑटो संयोजित करना चाहते हैं
body { 
    text-align: center; 
} 
संबंधित मुद्दे