CSS में 2024 में आखिरकार "vertical centering" जुड़ गया

• CSS में आखिरकार डिफॉल्ट layout में align-content जुड़ गया है, जिससे सिर्फ एक CSS property के साथ vertical alignment संभव हो गया है
  • समर्थित versions: Chrome 123, Firefox 125, Safari 17.4
• अभी तक basic flow layout में align-content काम नहीं करता था, इसलिए flexbox या grid पर switch करना पड़ता था
  • 2024 में आखिरकार browsers ने Flow layout में align-content implement कर दिया
  • अब flexbox या grid के बिना, सिर्फ 1 CSS property से alignment हो जाता है
  • इसलिए content को div में wrap करने की ज़रूरत नहीं है

vertical alignment का इतिहास

• browsers में vertical alignment के लिए लंबे समय तक कोई आसान तरीका नहीं था

तरीका 1: table cell

• Sanity(क्या यह सच में ठीक है?): ★★★☆☆
• flow(डिफॉल्ट), table, flexbox, grid जैसे 4 मुख्य layouts हैं, और content alignment layout के हिसाब से बदलता है
• flexbox और grid बाद में आए, इसलिए शुरू में table का इस्तेमाल किया गया

    Content.

तरीका 2: absolute positioning

• Sanity: ☆☆☆☆☆
• क्योंकि flow layout से मदद नहीं मिलती थी, इसलिए absolute positioning से workaround किया जाता था

    Content.

तरीका 3: inline content

• Sanity: ☆☆☆☆☆
• flow layout content alignment में मदद नहीं करता। यह एक line के भीतर vertical alignment की अनुमति देता है
• तो फिर container की height जितनी line बना दी जाए तो?

  ::before
  Content.

.container::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.content {
  display: inline-block;
  vertical-align: middle;
}

• इससे चीज़ें आसानी से अजीब हो सकती हैं

तरीका 4: single-line flexbox

• Sanity: ★★★☆☆
• Flexbox वेब की शुरुआत के लगभग 20 साल बाद जाकर व्यापक रूप से इस्तेमाल होने लगा
• single-line mode (डिफॉल्ट) में line vertical space भर देती है, और align-items से line के भीतर items को align किया जाता है

  Content.

• या lines को vertical बनाकर justify-content से items को align किया जा सकता है

  Content.

तरीका 5: multi-line flexbox

• Sanity: ★★★☆☆
• multi-line flexbox में align-content से lines को align किया जा सकता है

  Content.

तरीका 6: grid content

• Sanity: ★★★★☆
• grid और बाद में आया, इसलिए alignment थोड़ा आसान हो गया

  Content.

तरीका 7: grid cell

• Sanity: ★★★★☆
• align-content cells को container में align करता है, और align-items content को cell में align करता है

  Content.

तरीका 8: auto margin

• Sanity: ★★★☆☆
• flow layout में margin:auto horizontal direction में तो center करता है, लेकिन vertical में नहीं
• flexbox और grid में यह बेतुकापन नहीं है

    Content.

तरीका 9: 2024 का यह लेख

• Sanity: ★★★★★
• असल में browser को यह बहुत पहले जोड़ देना चाहिए था

  align-content just works!

[tobesimple7]

वाह~ ऐसा फीचर भी~~

[seunggi]

कंप्यूटर साइंस की सबसे मुश्किल चीज़ — सेंटर अलाइनमेंट

https://tonsky.me/blog/centering/

[mongsilsushi]

आख़िरकार!

[sgwanlee]

CSS अब बहुत आसान हो गया है, है ना? हाहाहा

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

हे भगवान, cheese crust

[shpkc]

आखिरकार !

[halfenif]

बहुत देर हो गई! बहुत देर हो गई! बहुत देर हो गई!

[uoayop]

आख़िरकार

[aer0700]

खुशी हुई

[koyokr]

हाहाहा

[nemorize]

a-men

[carnoxen]

क्या इस बदलाव की वजह से मौजूदा वेबसाइटों की संरचना बिगड़ जाने का खतरा है?

[bluekai17]

मुझे भी यह हिस्सा दिलचस्प लग रहा है।

[ng0301]

आख़िरकार!

[yatmak]

आख़िरकार Web 3.0 का युग आ ही गया।

[plaaat0102]

कमेंट्स मज़े से भरे हुए हैं हाहाहा..

[godppun]

सच में, आखिरकार...

[kangkung9225]

ओ...? क्या अब यह करना पड़ेगा haha..

[qurare]

आख़िरकार

[savvykang]

वाह!!!

[joyfui]

वाह!!!

[mkyoon]

मज़ेदार है!

[wedding]

मैं मुख्य रूप से app development करता हूँ, इसलिए जब भी web development में मदद करता था तो बिना ज़्यादा सोचे search करके जो flexbox मिलता था वही इस्तेमाल कर लेता था और मान लेता था कि यही center alignment है... यह तो अब तक था ही नहीं, यह जानकर सच में झटका लगा.....

[illiil1lii]

वाह!

[huiya]

आख़िरकार!

[tjddnjsjo]

कमाल है!

[pkj3186]

आख़िरकार!