पैरेंट DIV के बिना एक अनियंत्रित सूची को कैसे केन्द्रित करें

सीएसएस में, बाईं ओर बनाए रखते हुए एक अनियंत्रित सूची (

) को केन्द्रित करें- मूल div का उपयोग किए बिना संरेखित सूची आइटम चुनौतीपूर्ण हो सकते हैं। इस प्रभाव को प्राप्त करने का तरीका इस प्रकार है:

प्रदत्त कोड स्निपेट, पैरेंट डिव के साथ, डिव पर टेक्स्ट-एलाइन: सेंटर और सूची को केंद्र में रखने के लिए उल पर डिस्प्ले: इनलाइन-ब्लॉक का उपयोग करता है। हालाँकि, इस विधि के लिए एक पैरेंट डिव रैपर की आवश्यकता होती है। .

समाधान

को डिस्प्ले: टेबल का उपयोग करके तालिका की तरह व्यवहार करने के लिए सेट करने में निहित है। यह एक तालिका जैसी संरचना बनाता है जहां पंक्तियों को सूची आइटम (
• ) द्वारा परिभाषित किया जाता है।
  पर मार्जिन: 0 ऑटो सेट करके, तालिका (यानी, सूची) इसके युक्त तत्व के भीतर केंद्रित है।

  यहां सीएसएस कोड है जो इस प्रभाव को प्राप्त करता है:

  उल { प्रदर्शन: तालिका; मार्जिन: 0 ऑटो; }

  ul {
    display: table;
    margin: 0 auto;
  }

  • 56456456
  • 456456456456464999999999999999999999999999999996
  • 45645