CSS में div को केंद्र में कैसे संरेखित करें

 (joshwcomeau.com)
5 पॉइंट द्वारा GN⁺ 2024-02-14 | 3 टिप्पणियां | WhatsApp पर शेयर करें

एलिमेंट को केंद्र में संरेखित करने के तरीके

  • किसी एलिमेंट को उसके parent एलिमेंट के भीतर केंद्र में रखना लंबे समय से एक पेचीदा समस्या रही है.
  • CSS के विकसित होने के साथ इसके लिए कई तरह के समाधान उपलब्ध हुए हैं, और अब विकल्प काफी व्यापक हैं.
  • यह ट्यूटोरियल अलग-अलग approaches के बीच के trade-offs को समझने और हर तरह के scenario में centering को संभालने की strategy देता है.

auto margin का उपयोग करके centering

  • जब किसी एलिमेंट को horizontal दिशा में केंद्र में रखना हो, तो auto value वाले margin का उपयोग किया जा सकता है.
  • एलिमेंट की width को सीमित करना होगा, और fit-content एलिमेंट को उसके content के अनुसार resize करता है.
  • margin-inline property का उपयोग करके margin-left और margin-right दोनों को एक साथ auto पर सेट किया जा सकता है.

Flexbox का उपयोग करके centering

  • Flexbox main axis के साथ items के group को वितरित करने पर बहुत नियंत्रण देता है.
  • एक single एलिमेंट को horizontal और vertical दोनों दिशाओं में केंद्र में रखा जा सकता है, और child एलिमेंट्स container में फिट न होने पर भी centering बनी रहती है.
  • flex-direction property का उपयोग करके कई child एलिमेंट्स की stack direction को नियंत्रित किया जा सकता है.

viewport के भीतर centering

  • कुछ स्थितियों में एलिमेंट को parent container के बजाय viewport के भीतर केंद्र में रखना होता है.
  • position: fixed और inset: 0px का उपयोग करके एलिमेंट को viewport पर fix किया जा सकता है, और margin: auto से उसे horizontal और vertical दोनों दिशाओं में केंद्र में रखा जा सकता है.

अज्ञात आकार वाले एलिमेंट की centering

  • जब एलिमेंट का आकार स्पष्ट रूप से ज्ञात न हो, तो fit-content का उपयोग करके एलिमेंट को उसके content के अनुसार shrink किया जा सकता है.

CSS Grid का उपयोग करके centering

  • CSS Grid का उपयोग करके किसी एलिमेंट को horizontal और vertical दोनों दिशाओं में केंद्र में रखने का सबसे संक्षिप्त तरीका place-content: center property का उपयोग करना है.

Flexbox से अंतर

  • CSS Grid एक अलग layout algorithm का उपयोग करता है, और कभी-कभी इसकी अतिरिक्त जटिलता समस्या बन सकती है.
  • Flexbox percentages की गणना parent एलिमेंट के आधार पर करता है, जबकि CSS Grid grid cell के आधार पर गणना करता है.

एलिमेंट stack की centering

  • CSS Grid का उपयोग करके कई एलिमेंट्स को एक ही cell में assign किया जा सकता है, जिससे वे पीछे से आगे की ओर stack हो जाते हैं.

टेक्स्ट को केंद्र में संरेखित करना

  • टेक्स्ट को CSS में विशेष तरीके से संभाला जाता है, और text-align property का उपयोग करके टेक्स्ट को केंद्र में रखा जा सकता है.

centering का भविष्य

  • align-content property को Flow layout में भी implement किया जा रहा है, जो block direction में content alignment को नियंत्रित करता है.

patterns से आगे

  • CSS को गहराई से समझने पर, याद रखने पर निर्भर रहने के बजाय intuition के आधार पर समस्याएं हल की जा सकती हैं.

कौन-सा तरीका चुनें

  • अगर आप किसी single एलिमेंट को horizontal दिशा में केंद्र में रखना चाहते हैं, तो Flow layout की auto margin strategy का उपयोग कर सकते हैं.
  • modal या banner जैसे floating UI को केंद्र में रखना हो, तो Positioned layout और auto margin का उपयोग किया जा सकता है.
  • एलिमेंट्स के stack को केंद्र में रखना हो, तो CSS Grid का उपयोग किया जा सकता है.
  • टेक्स्ट को केंद्र में रखना हो, तो text-align का उपयोग किया जा सकता है, और इसे अन्य तरीकों के साथ भी इस्तेमाल किया जा सकता है.
  • अधिकतर बाकी स्थितियों में Flexbox का उपयोग किया जा सकता है. यह सबसे versatile तरीका है, जो एक या कई child एलिमेंट्स को horizontal/vertical दिशा में केंद्र में रख सकता है.

GN⁺ की राय

  • इस लेख की सबसे महत्वपूर्ण बात यह है कि यह CSS में centering के विभिन्न तरीकों की समझ को बेहतर बनाने में मदद करता है.
  • CSS के विकास के कारण पहले जो centering जटिल हुआ करती थी, वह अब काफी आसान हो गई है, और यह web developers के लिए बहुत मददगार है.
  • Flexbox और CSS Grid जैसी आधुनिक CSS तकनीकों को समझना और इस्तेमाल करना अब web design और layout के लिए आवश्यक कौशल बन चुका है.

संबंधित पढ़ाई

3 टिप्पणियां

 
v08zbv8fvlkjasdflkj 2024-02-15

वैसे सोचूं तो GeekNews में भी articles का center alignment न होना अचानक खटकने लगा है, हुहाहा
 
joyfui 2024-02-14

मैं place-items: center; का खूब इस्तेमाल करता हूँ, लेकिन और भी कई तरीके हैं।
 
GN⁺ 2024-02-14
Hacker News राय

  • पहली टिप्पणी का सार:

    • CSS में किसी element को center में रखना मुश्किल क्यों लगता है, इस पर कई तरह की राय हैं।
    • जब ज़्यादातर लोग पूछते हैं कि center align करना कठिन क्यों है, तो वे आमतौर पर बस यह पूछ रहे होते हैं कि एक element को दूसरे element के ठीक बीच में कैसे रखा जाए।
    • पुराने HTML में <table> टैग का इस्तेमाल करके इसे आसानी से center किया जा सकता था, लेकिन CSS में यह कठिन महसूस होता है।
    • यह निराशाजनक रहा कि CSS को बेहतर tool कहा गया, फिर भी बुनियादी centering तक आसानी से नहीं हो पाती थी।
    • इसी वजह से लंबे समय तक table layout का इस्तेमाल किया गया।
    • इसके बावजूद CSS पसंद है।

  • दूसरी टिप्पणी का सार:

    • बहुत से लोग automatic page layout और formatting की जटिलता को नहीं समझते।
    • इस जटिलता को सिर्फ़ "मेरी मर्ज़ी के मुताबिक कर दो" जैसी किसी सरल abstraction में बदलना संभव नहीं है।
    • उदाहरण के तौर पर Gwern Branwen की वेबसाइट का ज़िक्र करते हुए कहा गया कि मनचाहे style के हिसाब से content को सीमित करना महत्वपूर्ण है।
    • web page layout अलग-अलग display पर content दिखाने की एक जटिल प्रक्रिया है।
    • CSS उन लोगों को जटिल लग सकता है जो शुरू से web page बनाना तय करते हैं, लेकिन वास्तव में इसमें विकल्पों की काफ़ी गुंजाइश है।
    • मनचाहा नतीजा पाने के लिए सही tool ढूँढना और content को उचित रूप में पैक करना ज़रूरी है।

  • तीसरी टिप्पणी का सार:

    • CSS positioning और centering को समझने में box model की समझ मदद करती है।
    • display और position properties, positioning सीखने की बुनियाद हैं।
    • MDN पर इस बारे में उपयोगी article मौजूद है।

  • चौथी टिप्पणी का सार:

    • article बहुत अच्छा है, ख़ासकर इसका interactive हिस्सा प्रभावशाली है।
    • CSS में centering आसान बनाने वाली एक वेबसाइट का लंबे समय से उपयोग किया जा रहा है।

  • पाँचवीं टिप्पणी का सार:

    • CSS में 'centering' एक क्लासिक समस्या है।
    • CSS स्पष्ट नहीं है क्योंकि यह कई committees द्वारा एक साथ डिज़ाइन किया गया जटिल मिश्रण है।
    • CSS लगातार बदलावों के बीच अलग-अलग modules की स्थिति में मौजूद है।
    • software development के लिए यह कोई आदर्श तरीका नहीं है।

  • छठी टिप्पणी का सार:

    • दशकों बाद भी CSS ऐसा तरीका नहीं दे पाया जो table को center करने जितना प्रभावी हो।
    • इस दौरान layout के लिए table का उपयोग करना शर्मनाक चीज़ की तरह देखा गया।

  • सातवीं टिप्पणी का सार:

    • बहुत से लोगों को CSS से शिकायतें हैं।
    • style निर्देशों का आपस में टकराना, या बिना किसी असर के विफल हो जाना, मुख्य समस्या है।

  • आठवीं टिप्पणी का सार:

    • article में कहा गया है कि Flexbox सरल मामलों में centering की समस्या हल कर देता है।
    • जिन मामलों में Flexbox काम नहीं करता, वहाँ आमतौर पर सिर्फ़ centering से अधिक जटिल काम किया जा रहा होता है।

  • नौवीं टिप्पणी का सार:

    • position: absolute, left: 50%, transform: translateX(-50%) का उपयोग centering के लिए मुख्य तरीके के रूप में किया जाता है।

  • दसवीं टिप्पणी का सार:

    • CSS में div को center में रखना इतना कठिन लगा कि इसी वजह से web development छोड़ दिया।