CSS में div को center align करने का तरीका

(joshwcomeau.com)

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

CSS में center alignment अब कोई एक trick नहीं रही; यह चुनने का सवाल है कि element document flow में है या floating है या कई elements हैं—इसके आधार पर Flow, Flexbox, Positioned layout, CSS Grid, text-align में से सही तरीका चुनना होता है
किसी single element को horizontal center में रखने के लिए max-width: fit-content से width सीमित करके margin-inline: auto लगाने वाली Flow layout approach sibling elements पर कम असर डालती है
Flexbox में सिर्फ justify-content: center और align-items: center से single या multiple children को horizontal/vertical center में रखा जा सकता है, और child overflow हो तो भी वह symmetrically overflow होता है
modal या banner जैसे floating UI के लिए position: fixed, inset: 0, size constraints और margin: auto का combination सही है, और CSS Grid छोटा syntax तथा overlapping stack बनाने में मजबूत है
text अपने आप में layout alignment नहीं है; उसके लिए text-align: center चाहिए। Flow layout में align-content support व्यापक होने पर simple vertical alignment के लिए Flexbox या Grid पर switch करने की जरूरत घट सकती है

Flow layout में auto margin से horizontal center alignment

पुराने strategies में से एक तरीका है element की width सीमित करके दोनों तरफ के margins को auto रखना

.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

Flow layout में elements default रूप से horizontal space भरते हैं, इसलिए center में रखने के लिए पहले width constraint जरूरी है
fit-content element को content wrap करने देता है, जिससे width, height की तरह content size से तय होती है
width की जगह max-width इस्तेमाल करने पर सिर्फ maximum size सीमित होता है, इसलिए container संकरा होने पर element भी साथ में shrink हो सकता है
अगर सिर्फ margin-left: auto हो, तो बची हुई space left margin में चली जाती है; दोनों margins को auto रखने पर बची हुई space बराबर बंटती है और element center में आ जाता है

.element {
  max-width: fit-content;
  margin-inline: auto;
}

margin-inline, margin-left और margin-right को same value पर set करने का modern तरीका है, और इसका browser support अच्छा है
margin-inline logical properties का हिस्सा है, इसलिए यह left/right के बजाय writing direction के inline axis के आधार पर काम करता है
- left-to-right और right-to-left दोनों languages में सही side पर margin apply किया जा सकता है
यह तरीका तब उपयोगी है जब blog post के बीच की image जैसे सिर्फ single child को center align करना हो और sibling elements को प्रभावित नहीं करना हो

Flexbox से single और multiple children को center align करना

Flexbox main axis के साथ कई items arrange करने में मजबूत layout mode है, और center alignment के लिए भी अक्सर इस्तेमाल होता है

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content: center और align-items: center साथ इस्तेमाल करने पर children को horizontal और vertical center में रखा जा सकता है
child container में fit न भी हो, alignment बना रहता है, और overflow की स्थिति में भी symmetrically overflow होता है
कई children को भी center align किया जा सकता है, और flex-direction से stacking direction control किया जाता है

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

single या multiple children पर व्यापक रूप से लागू होने वाले default option के रूप में इस्तेमाल करने के लिए अच्छा है

Positioned layout से floating UI को center align करना

modal, prompt, banner जैसे elements जिन्हें normal document flow से बाहर निकलकर ऊपर float करना होता है, उन्हें Positioned layout से handle किया जा सकता है

.element {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}

position: fixed element को viewport पर fix करता है, और inset: 0px top, left, right, bottom सभी को 0px पर set करता है
सिर्फ inset: 0px होने पर element पूरे viewport को भरने की कोशिश करता है, इसलिए width, height, max-width, max-height से size constrain करना होता है
यह combination जानबूझकर impossible condition बनाता है
- element left और right दोनों से 0px दूर रहते हुए साथ ही 12rem width नहीं रख सकता
- CSS rendering engine width constraint को प्राथमिकता देता है और language direction के आधार पर उसे किसी एक side से चिपकाकर tension resolve करता है
इसमें margin: auto जोड़ने पर browser का resolve करने का तरीका बदलता है और element horizontal/vertical center में रखा जाता है
जरूरी चार conditions हैं: position: fixed, inset: 0px, constrained width और height, margin: auto
bottom banner की तरह सिर्फ एक direction में center align करना
```
.element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
```
- top: 0px हटाने पर vertical direction की impossible condition खत्म हो जाती है, और element bottom पर fixed रहता है
- calc(100vw - 8px * 2) viewport के दोनों तरफ buffer छोड़ने के लिए maximum width सीमित करता है
- margin-inline: auto horizontal center alignment के intent को ज्यादा स्पष्ट दिखाता है
ऐसे elements जिनका size पता नहीं
```
.element {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
```
- जब element size पहले से पता न हो, तो width: fit-content और height: fit-content से content को wrap कराया जा सकता है
- max-width: 60vw जैसी constraint जोड़ सकते हैं, लेकिन यह अनिवार्य नहीं है और element viewport के भीतर रहेगा
जानबूझकर center से थोड़ा हटाना
- bottom: 48px जैसी किसी एक side की inset value adjust करने पर element specified value के आधे से move होता है
- bottom: 48px हो तो element 24px ऊपर चला जाता है
- ऐसा इसलिए होता है क्योंकि element top/bottom boundaries के बीच बने virtual box में center पर लटका होता है
- transform: translateY(-48px) इस्तेमाल करने पर element को ठीक 48px ऊपर ले जाया जा सकता है
- bottom offset method transform property को बाद की animation या entry effect के लिए बचाकर रख सकता है

CSS Grid से कम syntax में center alignment और overlapping stack

CSS Grid में सबसे छोटा center alignment code display: grid और place-content: center का combination है

.container {
  display: grid;
  place-content: center;
}

place-content, justify-content और align-content का shorthand है, जो rows और columns पर same value apply करता है
इस setting से parent container के center में 1×1 Grid cell बनता है
Flexbox से अंतर
- यह Flexbox जैसा दिख सकता है, लेकिन CSS Grid पूरी तरह अलग layout algorithm इस्तेमाल करता है
- child को width: 50% और height: 50% देने पर अंतर दिखता है
- Flexbox में percentages parent .container के आधार पर calculate होते हैं
- CSS Grid में percentages Grid cell के आधार पर calculate होते हैं
- अगर grid-template-columns या grid-template-rows specify न करें, तो Grid tracks content के आधार पर size calculate करते हैं, और इससे element अपेक्षा से छोटा हो सकता है
- ऐसी स्थिति में Grid ठीक करने के लिए और CSS जोड़ी जा सकती है, लेकिन simple center alignment के लिए Flexbox ज्यादा आसान हो सकता है
कई elements को same position पर overlap करके stack करना
```
.container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
```
- CSS Grid कई children को same cell में place कर सकता है
- सभी .element पर grid-row: 1 और grid-column: 1 देने पर elements वही Grid space share करते हैं और आगे-पीछे overlap होकर stack होते हैं
- children के sizes अलग-अलग हों तब भी यह काम कर सकता है
```
.container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
```
- अलग-अलग size वाले children को center में overlap करना हो, तो place-items: center अतिरिक्त रूप से चाहिए
- place-items, justify-items और align-items का shorthand है, और Grid cell के अंदर images की alignment control करता है
- यह property न हो तो Grid cell खुद center में होने के बावजूद cell के अंदर images top-left में stack होंगी
- CSS Grid को और गहराई से देखने के लिए An Interactive Guide to CSS Grid देख सकते हैं

text को text-align से अलग से align करें

CSS में text को अलग से handle करना होता है; Flexbox जैसी layout techniques individual letters को align नहीं करतीं
Flexbox से paragraph को center में रखने पर paragraph block center में आता है, लेकिन paragraph के अंदर का text left-aligned ही रहता है
text को center align करने के लिए text-align: center इस्तेमाल करना चाहिए

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Flow layout का भविष्य: align-content

Flow layout में horizontal center alignment auto margin से संभव है, लेकिन vertical center alignment के लिए अब तक Flexbox या Grid जैसे दूसरे layout modes की जरूरत पड़ती थी
2024 की शुरुआत तक browser vendors Flow layout में align-content implement कर रहे हैं
यह नया behavior content के block direction alignment को control करता है, और उस समय यह सिर्फ Chrome Canary में flag के पीछे वाली feature और Safari Technical Preview में उपलब्ध था
example demo actual Flow layout behavior नहीं था, बल्कि Chrome Canary और Safari TP का behavior confirm करने के बाद Flexbox से reproduce किया गया था
यह feature कोई नया UI नहीं बनाता, लेकिन simple center alignment के लिए अलग layout mode में switch करने की जरूरत कम कर सकता है

स्थिति के हिसाब से selection criteria

single element को siblings पर असर डाले बिना horizontal center align करना हो, तो Flow layout auto margin strategy इस्तेमाल करें
modal या banner जैसे floating UI को Positioned layout और auto margin से center में रखें
कई elements को same position पर overlap करके center में stack करना हो, तो CSS Grid उपयुक्त है
text को center align करने के लिए text-align इस्तेमाल करें; इसे दूसरे center alignment methods के साथ भी इस्तेमाल किया जा सकता है
बाकी अधिकांश स्थितियों में Flexbox सबसे versatile option है
- single या multiple children को handle कर सकता है
- horizontal और vertical center alignment दोनों संभव हैं
- children container के अंदर हों या overflow कर रहे हों, दोनों में इस्तेमाल किया जा सकता है

3 टिप्पणियां

v08zbv8fvlkjasdflkj 2024-02-15

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

joyfui 2024-02-14

मैं place-items: center; का खूब इस्तेमाल करता हूँ, लेकिन और भी कई तरीके हैं।

GN⁺ 2024-02-14

Hacker News की राय

दूसरे comments खुद comments पर ही टिप्पणी कर रहे हैं, तो मैं भी शामिल हो जाऊँ: CSS centering meme से मेरा मतलब ज़्यादातर “एक element को दूसरे element के बिल्कुल center में रखने का तरीका” होता है
implementation के लिहाज़ से centering मुश्किल है और इसके कई मतलब हो सकते हैं—यह बात सही है, लेकिन GeoCities या AngelFire generation के लिए यह समझना मुश्किल था, क्योंकि HTML से 90s में भी 600x600 पीले box के ठीक बीच में hello बिना दिक्कत रखा जा सकता था
बेहतर बताकर मिला नया tool पहले से किए जा रहे standard काम को नहीं कर पा रहा था, इसलिए झुंझलाहट हुई, और इसी वजह से 2000s के आखिर तक table layout इस्तेमाल करते रहे। CSS मुझे पसंद है, लेकिन शायद यह किसी तरह का Stockholm syndrome भी हो सकता है
valign Chromium में न होने पर भी काम करता है, यह देखकर हैरानी हुई; पता नहीं यह हाल का बदलाव है या नहीं
- जैसा कहा गया, यानी 600x600 पीले box के ठीक बीच में hello रखना CSS के पहले version से ही संभव था। उदाहरण के लिए HTML का valign attribute, inline, inline-block, table-cell boxes के vertical-align CSS property से मेल खाता है
  हालांकि अनुभव के मुताबिक, “सिर्फ tables इस्तेमाल करें” जैसी romantic बात करने या CSS को सीमित और confusing बताकर शिकायत करने वाले कई लोगों ने असल में CSS कैसे काम करता है, यह सीखने की खास कोशिश नहीं की। लेखक कम-से-कम इस बात से वाकिफ है
- Firefox में भी "valign" attribute के बिना काम करता है। हालांकि fixed layout के बिना tables इस्तेमाल करते समय तीनों प्रमुख browsers के बीच subtle differences हमेशा देखे हैं, इसलिए आम तौर पर automatic layout behavior पर निर्भर नहीं रहूँगा
अच्छा लेख है, और nominally technical readership के हिसाब से यहाँ की प्रतिक्रिया काफी चौंकाने वाली है। automatic page layout और formatting वाकई मुश्किल हैं, और सच में PhD thesis का topic बनने लायक हैं[1]
इस complexity को “मेरी मंशा के मुताबिक कर दो” जैसी simple expression में abstract करने की उम्मीद realistic नहीं है
Gwern Branwen की website[2] देखें तो यह art के करीब लगती है, लेकिन core बात यह है कि पहले desired look तय किया जाता है और फिर writing को उस style के अंदर express हो सकने तक constrain किया जाता है
1995 में “web की पहली golf magazine” startup[3] से जुड़ने के बाद से web page layout देखता आ रहा हूँ, और Zen Garden और A List Apart mailing list/website[4] की बदौलत समझ आया कि अलग-अलग output environments में अच्छा दिखने वाला web content बनाना कितना कठिन है
semantic content को screen, paper, finite plane पर ले जाना असल में original space से destination space के ruleset तक एक mapping या projection है, और उन rules में physical constraints, browser software constraints, और हर browser का अपना behavior—सब शामिल हैं
इसलिए CSS “शुरू से web page बनाना है” सोचने वाले को mess जैसा दिखता है, लेकिन सच में यह कर सकने वाली चीज़ों को रोकने वाला constraint कम और बहुत ज़्यादा विकल्पों वाला मामला ज़्यादा है
[1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...
[2] https://gwern.net/
[3] इसका नाम Golfweb था, और लगता है अंततः CBS Sports का हिस्सा बन गया
[4] https://www.alistapart.com
- web layout में मेरा career 1998 से है, तो लगभग 3 साल पीछे हूँ, लेकिन संबंधित पूरे अनुभव में Every Layout resource[1] जितनी शानदार चीज़ अभी तक नहीं देखी। जोरदार recommendation
  [1] https://every-layout.dev/rudiments/boxes/
- CSS की समस्या लगभग पूरी तरह self-inflicted complexity है। layout कठिन है, यह सही है, लेकिन इसे और कठिन बनाने के लिए मौजूदा model को ही लक्ष्य क्यों बनाया गया, यह सवाल है
  खासकर हर page के लिए fit होने वाला एक बड़ा model बनाने और हर page पर automatic layout फिर से calculate करने का Sisyphean goal जुड़ा हुआ है। इसमें सभी window sizes को target करने का goal भी जोड़ दें, तो समझ नहीं आता कि इसे possible क्यों माना गया
- CSS art और देखना चाहता था, इसलिए यह link लगाए बिना नहीं रह सका
  https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/
  इसमें कितने centered div हैं, पता नहीं
- पिछले कुछ दिनों में flow-based layout और pagination को Flexbox-based layout system में जबरन fit करने की कोशिश की, और यह पक्का हुआ कि layout और formatting सचमुच मुश्किल हैं
  खासकर ऐसे tables में, जिनमें हर column में अलग size का text और objects हों, elements को कब और कैसे अगले page पर भेजना है—यह तय करना अच्छे heuristics चुनने वाला tricky काम है
- समझ नहीं आता कि यह self-imposed problem है या मूल रूप से कठिन research problem—इनमें फर्क कैसे करें। web development में आने से पहले मैंने कभी “layout मुश्किल है” नहीं सोचा था, और तब भी scrollable और resizable windows मौजूद थीं
  custom appkit, GTK controls, और public न किए गए Lua-based toolkit में भी content center करना या elements को wrap/align करना कोई बड़ी बात नहीं था, तो web में आखिर क्या miss हो रहा है, यह जानना चाहता हूँ
  “बस विकल्प भरपूर हैं” वाली बात बहुत पहले दफन हो चुके TMTOWTDI जैसी भी सुनाई देती है
शानदार लेख है और interactive elements खास तौर पर अच्छे हैं। कुछ साल पहले CSS positioning और centering समझने में box model पढ़ने से बहुत मदद मिली थी
box model समझने से DOM के अंदर flow को समझने में मदद मिलती है, और display और position CSS properties भी positioning सीखने की बुनियाद हैं। MDN docs अच्छे हैं
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
“बीच में align कैसे करें” CSS का classic सवाल है, और यह बात अपने-आप में बहुत कुछ बताती है कि यह सामने दिखने जितना obvious नहीं है। CSS असल में धुंधला-सा खिचड़ी मिक्स है; यह किसी एक committee का नहीं, बल्कि कई committees द्वारा एक साथ design किया गया kitchen-sink collection है
वास्तविक release जैसा concept तो बहुत पहले छोड़ दिया गया था, और CSS की मौजूदा स्थिति लगातार बदलते अलग-अलग modules की states को जमा कर रखने जैसी है। यह software develop करने का तरीका नहीं है, और सच कहें तो कुछ भी बनाने का अच्छा तरीका नहीं है
- सहमत भी हूं और असहमत भी। बड़े human groups वैसे भी इसी तरह धीमे और अव्यवस्थित चलते हैं; यह cats को herd करने जैसा है
  web और उसकी technologies सामूहिक रूप से किस दिशा में जा रही हैं, यह भी स्पष्ट नहीं है, इसलिए असफल experiments और inconsistencies बहुत होना तय है। यह साफ लक्ष्य और path वाले well-planned engineering project से कहीं ज्यादा व्यापक scope है
- मेरे हिसाब से center-align वाला सवाल इसलिए बार-बार आता है क्योंकि सीखने वाले के नजरिए से यह बहुत स्वाभाविक पहला सवाल है
  जो व्यक्ति webpage को मनचाहा रूप देना सीख रहा होता है, वह आम तौर पर सबसे पहले font size, color, background color, alignment सीखता है; alignment को छोड़ दें तो बाकी चीजें CSS से पहले के तरीकों से लगभग 1:1 match करती हैं
  CSS से पहले, अगर content को बीच में रखना होता था तो बस tag में डाल देते थे, चाहे वह text हो या div, table, button जैसा कोई HTML object। बहुत लोगों को उम्मीद थी कि CSS भी पुराने तरीके की तरह inline और block objects में फर्क किए बिना काम करेगा, लेकिन CSS उस preconception से match नहीं हुआ, इसलिए यह सवाल पैदा हुआ
यह लेख वाकई अच्छा है, खासकर interaction का तरीका शानदार है। एक tool भी है जो काफी समय से लगभग हमेशा वही result देता आया है जो चाहिए होता है
http://howtocenterincss.com
CSS को content को center में रखने वाली table जितना काम का solution देने में दशकों लग गए, और उस दौरान layout के लिए tables इस्तेमाल करना criticize किया जाता रहा
- HTML tables mobile screens पर अच्छी तरह line-wrap नहीं होतीं। अगर layout को table से बनाया जाए तो horizontal scrollbar आने की संभावना ज्यादा होती है, और mobile support के लिए दोबारा लिखना पड़ सकता है; इसलिए अगर वह data table नहीं है तो CSS framework आम तौर पर ज्यादा safe होता है
  HTML tables में accessibility के लिए कम-से-कम `` जैसी handling की जरूरत होती है
  https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/A...
  CSS Grid Layout resources भी देखने लायक हैं
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
  Firefox DevTools > INTRODUCTION TO CSS GRID LAYOUT: https://mozilladevelopers.github.io/playground/css-grid/
  CSS Grid Garden: https://cssgridgarden.com/
  MDN > "Relationship of grid layout to other layout methods": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
  MDN: "Box alignment in grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
- non-tabular data को table के रूप में दिखाना semantic नहीं है और accessibility भी तोड़ता है
  web development में content page पर कहां रखा है, इससे कहीं ज्यादा चीजें शामिल होती हैं, और इसी वजह से अच्छा web development मुश्किल है
- सही है, वह दौर याद है। div और CSS का फायदा hipster reputation था, और नुकसान DIV soup था
  उस समय CSS लोगों के किए जाने वाले कामों के लिए अविश्वसनीय रूप से अनुपयुक्त था; मेरे हिसाब से वजह यह थी कि इसे document formatting के लिए design किया गया था, web apps या screen layout के लिए नहीं
  दूसरी तरफ table का फायदा यह था कि वह सच में काम करता था
- उस समय tables इस्तेमाल करने का तरीका सबसे मजबूत लगता था
यहां कई लोगों की तरह मुझे भी CSS पूरी तरह disaster लगता है। core problem यह है कि style instructions लगातार एक-दूसरे को overwrite करते रहते हैं, या बिना कोई effect दिखाए चुपचाप fail हो जाते हैं
examples में से एक cookie notice बेरहमी से ईमानदार था, यह अच्छा लगा
“हम आपके personal data को महत्व देते हैं। browsing experience बेहतर करने के लिए हम ऐसे cookies इस्तेमाल करते हैं जो यह data advertisers को बेचते हैं। यह बहुत valuable है”
layout में tables इस्तेमाल करने के इतिहास से सीखने वाली बात दिलचस्प है। tables में border, padding, columns में arranged cell-based layout होता है, और इसे आगे बढ़ाएं तो table और cells के आसपास खाली जगह, यानी margin भी चाहिए
tables layout में लंबे समय से established element रहे हैं, और उनमें यह समझ छिपी थी कि असल में सभी elements को कुछ हद तक table cell की तरह behave करना चाहिए
element को box model follow करना चाहिए, जो typography से जुड़े लोगों के लिए काफी obvious है, लेकिन साथ ही उसे columns में arrange होना चाहिए—यह बात उतनी obvious नहीं है, और यही Grid layout और Bootstrap का आधार बनती है
layout problem आने पर उसे table से solve करना, फिर यह समझना कि table की कुछ properties तो चाहिए लेकिन सारी नहीं, और उसके लिए नई functionality चाहिए—यह एक natural evolution है
CSS ने इसे discover किया, लेकिन अजीब बात है कि word processor जैसे कुछ systems elements को box model के तहत unify नहीं कर पाए
“यह अब भी इतना मुश्किल क्यों है” जैसी शिकायतें मुझे काफ़ी गलत लगती हैं। लेख में जैसा कहा गया है, Flexbox simple हर तरह की centering को सहज तरीके से हल कर देता है
अगर Flexbox से हल नहीं हो रहा, तो वह सिर्फ़ centering नहीं बल्कि कोई ज़्यादा जटिल काम है, और यह उम्मीद करना ठीक नहीं कि implementation बहुत simple होगा
- लंबे समय से काम करने वाले व्यक्ति के तौर पर, Flexbox से पहले यह मुश्किल था, और उस दौर में भी जब Flexbox 100% supported नहीं था, लगातार browser usage track करके तय करना पड़ता था कि इसे इस्तेमाल किया जा सकता है या नहीं, इसलिए यह मुश्किल था
  अब तरीके इतने ज़्यादा हैं कि complexity हावी हो जाती है। नए बनाने से ज़्यादा पुराने code को ठीक करने के मामले आते हैं, और यह सोचना पड़ता है कि CSS किसी खास तरीके से क्यों लिखी गई, कौन-से edge cases टूटेंगे, इसे ठीक करना ठीक है या नहीं, और जब मामला simple न हो तो कई solutions में से क्या चुना जाए
  लेख को सरसरी तौर पर देखने पर भी यह intuitive नहीं लगता। Flexbox में भी horizontal setting justify-content है और vertical setting align-items, लेकिन CSS property names इतने ज़्यादा और मनमाने हैं कि अब ठीक से याद नहीं रहते
  आखिर फ़र्क यह है कि क्या आप simple, intuitive और भरोसेमंद building blocks से complex solution बनाते हैं, या ऐसे complex building blocks से complex solution बनाते हैं जो आपस में कुछ हद तक overlap करते हैं और जिन्हें बार-बार search करना पड़ता है
  Go या Python पहले वाले के करीब हैं, और CSS दूसरे वाले के करीब
- Flexbox वही रूप है जिसकी मैं हमेशा CSS से उम्मीद करता था; लंबे समय तक ऐसा नहीं था, फिर एक दिन ऐसा हो गया, और Flexbox बिना वाले browsers का support छोड़ना संभव हो गया। यह लगभग CSS के अंतिम रूप जैसा महसूस होता है
  लोगों को Bootstrap का grid system पसंद आने की वजह थी, और Flexbox वह सब और उससे भी ज़्यादा सीधे browser के अंदर कर देता है। मुझे यह कितना पसंद है, इसे बढ़ा-चढ़ाकर बताना भी मुश्किल है
- एक समय कुछ खास मामलों में यह कुछ हद तक मुश्किल था, लेकिन पिछले करीब 10 सालों से यह पहले ही हल हो चुकी समस्या है। फिर भी कुछ लोग अब भी ऐसे बात करते हैं जैसे CSS में div को center करना कीमिया और rocket science के बीच की कोई चीज़ हो
  इससे दिखता है कि वे web development के दूसरे हिस्सों जितना CSS में हुए बदलावों के साथ नहीं चलते, फिर भी ऐसे दावे आराम से कर देते हैं
- ऊपर से, Flexbox 10 साल से ज़्यादा समय से व्यापक रूप से supported है। यहां comments का flow काफ़ी दिलचस्प है
- बिल्कुल सही बात है। Flexbox से जूझते समय एक कदम पीछे हटकर, एक-एक step में हल करना मददगार होता है
  बाहर से अंदर की ओर, parent element से child element तक चलते जाएँ तो यह कहीं आसान हो जाता है। Skill की ज़रूरत तो होती है, लेकिन मूल रूप से यह elastic algebra के करीब है

CSS में div को center align करने का तरीका

Flow layout में auto margin से horizontal center alignment

Flexbox से single और multiple children को center align करना

Positioned layout से floating UI को center align करना

bottom banner की तरह सिर्फ एक direction में center align करना

ऐसे elements जिनका size पता नहीं

जानबूझकर center से थोड़ा हटाना

CSS Grid से कम syntax में center alignment और overlapping stack

Flexbox से अंतर

कई elements को same position पर overlap करके stack करना

text को text-align से अलग से align करें

Flow layout का भविष्य: align-content

स्थिति के हिसाब से selection criteria

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

3 टिप्पणियां

Hacker News की राय