CSSని ఉపయోగించి Divని క్షితిజ సమాంతరంగా ఎలా మధ్యలో ఉంచాలి

Mia Chevalier
16, జూన్ 2024, ఆదివారం 2:53:20 AMకి
HTML and CSS

CSSతో మాస్టరింగ్ Div అలైన్‌మెంట్

CSSలో మూలకాలను అడ్డంగా కేంద్రీకరించడం అనేది వెబ్ డెవలపర్‌లు ఎదుర్కొనే ఒక సాధారణ పని. అది బటన్, ఇమేజ్ లేదా డివిని సమలేఖనం చేసినా, ఖచ్చితమైన అమరికను సాధించడం కొన్నిసార్లు గమ్మత్తైనది. ఈ గైడ్‌లో, మేము క్షితిజ సమాంతరంగా కేంద్రీకరించడానికి వివిధ పద్ధతులను అన్వేషిస్తాము

మరొక లోపల
CSS ఉపయోగించి.

ఈ టెక్నిక్‌లను అర్థం చేసుకోవడం మరియు వర్తింపజేయడం ద్వారా, మీ వెబ్ ఎలిమెంట్‌లు మీకు కావలసిన చోట ఖచ్చితంగా ఉంచబడ్డాయని మీరు నిర్ధారించుకోవచ్చు. ఈ ముఖ్యమైన CSS నైపుణ్యం గురించి మీకు సమగ్ర అవగాహన కల్పించడానికి మేము ఫ్లెక్స్‌బాక్స్, గ్రిడ్ మరియు సాంప్రదాయ పద్ధతులతో సహా విభిన్న విధానాలను కవర్ చేస్తాము.

ఆదేశం వివరణ
display: flex; ఫ్లెక్స్ కంటైనర్‌ను నిర్వచిస్తుంది మరియు ఫ్లెక్స్‌బాక్స్ లేఅవుట్‌ను ప్రారంభిస్తుంది.
justify-content: center; ఫ్లెక్స్ కంటైనర్‌లో అంశాలను అడ్డంగా కేంద్రీకరిస్తుంది.
align-items: center; ఫ్లెక్స్ కంటైనర్‌లో అంశాలను నిలువుగా కేంద్రీకరిస్తుంది.
place-items: center; గ్రిడ్ కంటైనర్‌లో అంశాలను అడ్డంగా మరియు నిలువుగా కేంద్రీకరిస్తుంది.
transform: translate(-50%, -50%); మూలకాన్ని దాని స్వంత వెడల్పు మరియు ఎత్తులో 50% మధ్యకు మారుస్తుంది.
position: absolute; దాని సమీప స్థానంలో ఉన్న పూర్వీకులకు సంబంధించి ఒక మూలకాన్ని ఉంచుతుంది.
top: 50%; మూలకాన్ని కలిగి ఉన్న మూలకం ఎగువ నుండి 50% ఉంచుతుంది.
left: 50%; మూలకాన్ని కలిగి ఉన్న మూలకం యొక్క ఎడమవైపు నుండి 50% ఉంచుతుంది.

ఫ్లెక్స్‌బాక్స్, గ్రిడ్ మరియు సాంప్రదాయ CSSతో మూలకాలను కేంద్రీకరించడం

మొదటి స్క్రిప్ట్ aని ఎలా కేంద్రీకరించాలో చూపుతుంది

ఉపయోగించి . సెట్ చేయడం ద్వారా పేరెంట్ కంటైనర్‌లో, చైల్డ్ ఎలిమెంట్స్ ఫ్లెక్స్ ఐటమ్‌లుగా మారతాయి. ది ఆస్తి ఈ వస్తువులను అడ్డంగా కేంద్రీకరిస్తుంది align-items: center; వాటిని నిలువుగా కేంద్రీకరిస్తుంది. ఈ పద్ధతి చాలా బహుముఖమైనది మరియు డైనమిక్ లేఅవుట్‌లకు బాగా పనిచేస్తుంది.

రెండవ స్క్రిప్ట్‌లో, మేము ఉపయోగించుకుంటాము ఇలాంటి ఫలితాలను సాధించడానికి. దరఖాస్తు చేయడం ద్వారా మాతృ కంటైనర్‌కు మరియు , పిల్లల మూలకాలు క్షితిజ సమాంతరంగా మరియు నిలువుగా కేంద్రీకృతమై ఉంటాయి. గ్రిడ్ ఆధారిత లేఅవుట్‌లకు ఈ పద్ధతి ప్రత్యేకంగా ఉపయోగపడుతుంది. చివరగా, సాంప్రదాయ పద్ధతిలో అమరిక ఉంటుంది position: absolute; పిల్లల మూలకం మరియు ఉపయోగించడంపై మరియు తో దానిని పేరెంట్‌లో కేంద్రీకరించడానికి. ఈ విధానం స్థిర-పరిమాణ మూలకాల కోసం ప్రభావవంతంగా ఉంటుంది.

ఫ్లెక్స్‌బాక్స్‌ని క్షితిజసమాంతరంగా మధ్యలో ఉంచడం

Flexboxతో HTML మరియు CSS

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS గ్రిడ్‌తో డివిని కేంద్రీకరిస్తోంది

గ్రిడ్ లేఅవుట్‌తో HTML మరియు CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSSతో కేంద్రీకరించడానికి సాంప్రదాయ పద్ధతి

మార్జిన్ ఆటోతో HTML మరియు CSS

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

ఎలిమెంట్స్ కేంద్రీకరణ కోసం అధునాతన పద్ధతులు

కంటైనర్‌లో మూలకాలను అడ్డంగా కేంద్రీకరించడానికి మరొక పద్ధతిని ఉపయోగించడం ఆస్తి. ఈ విధానం ఇన్‌లైన్-బ్లాక్ లేదా ఇన్‌లైన్ మూలకాల కోసం ప్రత్యేకంగా ప్రభావవంతంగా ఉంటుంది. దరఖాస్తు చేయడం ద్వారా పేరెంట్ కంటైనర్‌కు, అన్ని చైల్డ్ ఎలిమెంట్స్ క్షితిజ సమాంతరంగా కేంద్రీకరించబడతాయి. అయినప్పటికీ, బ్లాక్-లెవల్ ఎలిమెంట్‌లను ఇన్‌లైన్-బ్లాక్‌గా మార్చకపోతే ఈ పద్ధతి పని చేయదు.

అదనంగా, మీరు ఉపయోగించవచ్చు బ్లాక్-స్థాయి మూలకాలను కేంద్రీకరించడానికి ఆస్తి. మూలకం యొక్క ఎడమ మరియు కుడి మార్జిన్‌లను స్వయంచాలకంగా సెట్ చేయడం ద్వారా, మీరు దానిని దాని పేరెంట్ కంటైనర్‌లో క్షితిజ సమాంతరంగా మధ్యలో ఉంచవచ్చు. ఈ సాంకేతికత సరళమైనది మరియు స్థిర-వెడల్పు మూలకాల కోసం బాగా పనిచేస్తుంది. ఫ్లెక్స్‌బాక్స్ మరియు గ్రిడ్ వంటి ఆధునిక CSS లేఅవుట్ టెక్నిక్‌లతో ఈ పద్ధతులను కలపడం వల్ల అవసరమైన విధంగా ఎలిమెంట్‌లను సరిగ్గా సమలేఖనం చేయడానికి సమగ్ర టూల్‌కిట్‌ను అందిస్తుంది.

  1. నేను ఇన్‌లైన్ మూలకాన్ని ఎలా కేంద్రీకరించాలి?
  2. వా డు పేరెంట్ కంటైనర్‌లో ఇన్‌లైన్ ఎలిమెంట్స్ మధ్యకు.
  3. నేను మార్జిన్‌ని ఉపయోగించవచ్చా: ఆటో; బ్లాక్ ఎలిమెంట్‌ను మధ్యలో ఉంచాలా?
  4. అవును, సెట్టింగ్ ఎడమ మరియు కుడి వైపులా ఒక బ్లాక్ మూలకం మధ్యలో ఉంటుంది.
  5. కేంద్రీకరించడానికి ఫ్లెక్స్‌బాక్స్ మరియు గ్రిడ్ మధ్య తేడా ఏమిటి?
  6. ఒక డైమెన్షనల్ లేఅవుట్‌ల కోసం ఉపయోగించబడుతుంది, అయితే రెండు డైమెన్షనల్ లేఅవుట్‌ల కోసం.
  7. నేను CSSతో స్థిర-వెడల్పు మూలకాన్ని ఎలా కేంద్రీకరించాలి?
  8. వా డు లేదా తో
  9. నేను ఫ్లెక్స్‌బాక్స్‌తో ఎలిమెంట్‌లను నిలువుగా మధ్యలో ఉంచవచ్చా?
  10. అవును, ఉపయోగించండి ఫ్లెక్స్ కంటైనర్‌లో నిలువుగా మూలకాలను మధ్యలో ఉంచడానికి.
  11. టెక్స్ట్-సమలేఖనం చేస్తుంది: మధ్యలో; బ్లాక్ ఎలిమెంట్స్ కోసం పని చేయాలా?
  12. లేదు, ఇన్లైన్ లేదా ఇన్లైన్-బ్లాక్ ఎలిమెంట్స్ కోసం మాత్రమే పని చేస్తుంది.
  13. నేను కంటైనర్‌లో బహుళ మూలకాలను ఎలా కేంద్రీకరించాలి?
  14. వా డు తో మరియు
  15. స్థలం-అంశాలు అంటే ఏమిటి: కేంద్రం; గ్రిడ్‌లో?
  16. గ్రిడ్ కంటైనర్‌లో అంశాలను అడ్డంగా మరియు నిలువుగా కేంద్రీకరిస్తుంది.
  17. ఫ్లెక్స్‌బాక్స్ లేదా గ్రిడ్ లేకుండా మూలకాలను కేంద్రీకరించడం సాధ్యమేనా?
  18. అవును, వంటి పద్ధతులను ఉపయోగించడం , , లేదా మూలకాలను కూడా కేంద్రీకరించవచ్చు.

CSS కేంద్రీకరణ సాంకేతికతలను చుట్టడం

విభిన్న CSS పద్ధతులను ఉపయోగించి ఎలిమెంట్‌లను క్షితిజ సమాంతరంగా ఎలా కేంద్రీకరించాలో అర్థం చేసుకోవడం దృశ్యమానంగా ఆకట్టుకునే వెబ్ లేఅవుట్‌లను రూపొందించడానికి అవసరం. వంటి మాస్టరింగ్ పద్ధతులు ద్వారా , , మరియు లక్షణాలు, డెవలపర్‌లు తమ డిజైన్‌లు క్రియాత్మకంగా మరియు సౌందర్యంగా ఉండేలా చూసుకోవచ్చు. ఈ పద్ధతులతో ప్రయోగాలు చేయడం వల్ల CSS సామర్థ్యాలపై లోతైన అవగాహన లభిస్తుంది.