CSSని ఉపయోగించి Divలో వచనాన్ని నిలువుగా కేంద్రీకరించడం

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

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

నిలువు కేంద్రీకరణ కోసం CSS పరివర్తనను అన్వేషిస్తోంది

a లోపల వచనాన్ని నిలువుగా కేంద్రీకరించడానికి మరొక ప్రభావవంతమైన పద్ధతి CSSని ఉపయోగిస్తోంది ఆస్తి. కలపడం ద్వారా తో transform: translateY(-50%);, మేము ఖచ్చితమైన నిలువు అమరికను సాధించగలము. మొదట, ది సెట్ చేయబడింది రిఫరెన్స్ పాయింట్‌గా పనిచేయడానికి. అప్పుడు, తో పిల్లల మూలకం పేరెంట్ కంటైనర్‌లో టాప్ 50%లో ఉంచబడింది. చివరగా, దరఖాస్తు transform: translateY(-50%); మూలకాన్ని దాని స్వంత ఎత్తులో సగభాగం పైకి కదిలిస్తుంది, దానిని నిలువుగా కేంద్రీకరిస్తుంది.

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

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

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