मार्जिन:ऑटो; इनलाइन-ब्लॉक तत्वों पर काम नहीं करता है

सीएसएस में, मार्जिन:ऑटो; आमतौर पर किसी पृष्ठ पर ब्लॉक तत्वों को क्षैतिज रूप से केन्द्रित करने के लिए उपयोग किया जाता है। हालाँकि, जब इनलाइन-ब्लॉक तत्वों पर लागू किया जाता है, तो यह संपत्ति अप्रभावी हो जाती है।

इनलाइन-ब्लॉक तत्व इनलाइन तत्वों की तरह पेज इनलाइन में प्रवाहित होते हैं लेकिन उनकी एक विशिष्ट चौड़ाई और ऊंचाई हो सकती है। मार्जिन:ऑटो; का उपयोग करके उन्हें क्षैतिज रूप से केन्द्रित करने का प्रयास करते समय यह व्यवहार कठिनाइयाँ पैदा करता है।

पुराना कोड:

#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

इस कोड में, #container तत्व की एक विशिष्ट चौड़ाई होती है और अपेक्षित केंद्रीकरण व्यवहार को ट्रिगर करता है।

नया कोड:

#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}

#container की डिस्प्ले प्रॉपर्टी को इनलाइन-ब्लॉक में बदलने से मार्जिन के साथ इंटरैक्ट करने का तरीका बदल जाता है। इनलाइन-ब्लॉक तत्व ब्लॉक तत्वों के रूप में व्यवहार नहीं करते हैं और मार्जिन: ऑटो; का उपयोग करके केंद्रित होने की क्षमता खो देते हैं। क्षैतिज रूप से, इसके बजाय युक्त तत्व पर टेक्स्ट-एलाइन: सेंटर प्रॉपर्टी का उपयोग करें:

.केंद्र { पाठ-संरेखण: केंद्र; }

यह इनलाइन-ब्लॉक तत्व को उसके युक्त ब्लॉक तत्व के केंद्र में संरेखित करेगा।