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

 (build-your-own.org)
35 पॉइंट द्वारा xguru 2024-09-03 | 29 टिप्पणियां | WhatsApp पर शेयर करें
  • 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 का इस्तेमाल किया गया
<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>

तरीका 2: absolute positioning

  • Sanity: ☆☆☆☆☆
  • क्योंकि flow layout से मदद नहीं मिलती थी, इसलिए absolute positioning से workaround किया जाता था
<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>

तरीका 3: inline content

  • Sanity: ☆☆☆☆☆
  • flow layout content alignment में मदद नहीं करता। यह एक line के भीतर vertical alignment की अनुमति देता है
  • तो फिर container की height जितनी line बना दी जाए तो?
<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.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 किया जाता है
<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>
  • या lines को vertical बनाकर justify-content से items को align किया जा सकता है
<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>

तरीका 5: multi-line flexbox

  • Sanity: ★★★☆☆
  • multi-line flexbox में align-content से lines को align किया जा सकता है
<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>

तरीका 6: grid content

  • Sanity: ★★★★☆
  • grid और बाद में आया, इसलिए alignment थोड़ा आसान हो गया
<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>

तरीका 7: grid cell

  • Sanity: ★★★★☆
  • align-content cells को container में align करता है, और align-items content को cell में align करता है
<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>

तरीका 8: auto margin

  • Sanity: ★★★☆☆
  • flow layout में margin:auto horizontal direction में तो center करता है, लेकिन vertical में नहीं
  • flexbox और grid में यह बेतुकापन नहीं है
<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>

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

  • Sanity: ★★★★★
  • असल में browser को यह बहुत पहले जोड़ देना चाहिए था
<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>

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

29 टिप्पणियां

 
tobesimple7 2024-10-17

वाह~ ऐसा फीचर भी~~
 
seunggi 2024-09-12

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

https://tonsky.me/blog/centering/
 
mongsilsushi 2024-09-06

आख़िरकार!
 
sgwanlee 2024-09-04

CSS अब बहुत आसान हो गया है, है ना? हाहाहा
 
jwh926 2024-09-04

🙏🏻🙏🏻🙏🏻🙏🏻
 
rulerwithcss 2024-09-04

हे भगवान, cheese crust
 
shpkc 2024-09-04

आखिरकार !
 
halfenif 2024-09-04

बहुत देर हो गई! बहुत देर हो गई! बहुत देर हो गई!
 
uoayop 2024-09-03

आख़िरकार
 
aer0700 2024-09-03

खुशी हुई
 
koyokr 2024-09-03

हाहाहा
 
nemorize 2024-09-03

a-men
 
carnoxen 2024-09-03

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

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

आख़िरकार!
 
yatmak 2024-09-03

आख़िरकार Web 3.0 का युग आ ही गया।
 
plaaat0102 2024-09-03

कमेंट्स मज़े से भरे हुए हैं हाहाहा..
 
godppun 2024-09-03

सच में, आखिरकार...
 
kangkung9225 2024-09-03

ओ...? क्या अब यह करना पड़ेगा haha..
 
2024-09-03
[यह टिप्पणी छिपाई गई है.]
 
qurare 2024-09-03

आख़िरकार
 
savvykang 2024-09-03

वाह!!!
 
joyfui 2024-09-03

वाह!!!
 
mkyoon 2024-09-03

मज़ेदार है!
 
wedding 2024-09-03

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

वाह!
 
huiya 2024-09-03

आख़िरकार!
 
tjddnjsjo 2024-09-03

कमाल है!
 
pkj3186 2024-09-03

आख़िरकार!