CSSని ఉపయోగించి అన్ని బ్రౌజర్‌ల కోసం డైవ్ ఎలిమెంట్‌ను నిలువుగా ఎలా కేంద్రీకరించాలి

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

CSSని నిలువుగా ఉపయోగించి అన్ని బ్రౌజర్‌ల కోసం div ఎలిమెంట్‌ను ఎలా మధ్యలో ఉంచాలో ఈ పోస్ట్ మీకు మార్గనిర్దేశం చేస్తుంది.

CSSని ఉపయోగించి డైవ్ ఎలిమెంట్‌ను ఎలా సమలేఖనం చేయాలి?

డిస్ప్లే ప్రాపర్టీని ఉపయోగించడం ద్వారా div మూలకం నిలువుగా సమలేఖనం చేయబడుతుంది ' ఫ్లెక్స్ 'CSSతో పాటు' సమలేఖనం-అంశాలు 'ఆస్తి మరియు' జస్టిఫై-కంటెంట్ ”ఆస్తి. 'సమలేఖనం-అంశాలు' లక్షణం మూలకాన్ని నిలువుగా సమలేఖనం చేస్తుంది మరియు 'జస్టిఫై-కంటెంట్' లక్షణం కంటెంట్‌ను అడ్డంగా సమలేఖనం చేస్తుంది.

ఉదాహరణ: CSSతో డైవ్ ఎలిమెంట్‌ను నిలువుగా కేంద్రీకరించడం ఎలా?

HTMLలో, ముందుగా, ఒక “ని జోడించండి

'మూలకం మరియు దానికి తరగతిని కేటాయించండి' ప్రధాన కంటెంట్ ”. “

” ట్యాగ్‌ల మధ్య, “ని జోడించండి కింది లక్షణాలతో మూలకం:

---

---

• ' src చిత్రం యొక్క URLని పేర్కొనడానికి ” లక్షణం ఉపయోగించబడుతుంది.
• ' ప్రతిదీ చిత్రం లోడ్ చేయడంలో విఫలమైతే దాని స్థానంలో ప్రదర్శించబడే కొంత వచనాన్ని లక్షణం నిర్వచిస్తుంది.
• ' వెడల్పు చిత్రం వెడల్పును సర్దుబాటు చేయడానికి ” లక్షణం ఉపయోగించబడుతుంది.
• అప్పుడు, 'ని జోడించండి

  పేరాను పేజీలో పొందుపరచడానికి మూలకం.

ఇక్కడ HTML కోడ్ ఉంది:

< div తరగతి = 'ప్రధాన-కంటెంట్' >
< img src = '/images/laptop-notepad.jpg' ప్రతిదీ = 'నోట్‌ప్యాడ్ మరియు పెన్‌తో ల్యాప్‌టాప్' వెడల్పు = '300' >
< p > ల్యాప్‌టాప్ పోర్టబుల్ కంప్యూటర్ అని కూడా అంటారు వంటి ఒక నోట్బుక్ కంప్యూటర్. p >
div >

CSSలో, మేము divకి అనేక స్టైలింగ్ లక్షణాలను నిర్దేశిస్తాము.

శైలి 'ప్రధాన-కంటెంట్' క్లాస్

.ప్రధాన-కంటెంట్ {
ఎత్తు: యాభై % ;
నేపథ్య రంగు: #46C2CB;
ఫాంట్ పరిమాణం: 24px;
పాడింగ్: 10px;
}

కింది CSS లక్షణాలు 'లో నిర్వచించబడ్డాయి ప్రధాన కంటెంట్ 'తరగతి:

• ' ఎత్తు ” లక్షణం
  కంటైనర్ ఎత్తును సర్దుబాటు చేయడానికి ఉపయోగించబడుతుంది.
• ' నేపథ్య రంగు ” మూలకం యొక్క నేపథ్య రంగును నిర్వచిస్తుంది.
• ' ఫాంట్ పరిమాణం ” మూలకం యొక్క ఫాంట్ పరిమాణాన్ని నిర్దేశిస్తుంది.
• ' పాడింగ్ ”ప్రాపర్టీ మూలకం కంటెంట్ చుట్టూ ఖాళీని సెట్ చేస్తుంది.

అవుట్‌పుట్ నుండి, div మూలకం యొక్క కంటెంట్ మధ్యలో లేదని మీరు గమనించవచ్చు:

'ని కేంద్రీకరించడానికి సహాయపడే CSS లక్షణాలను వర్తింపజేయడానికి ముందుకు వెళ్దాం'

”మూలకం నిలువుగా. ఈ లక్షణాలను తరగతికి జోడించండి ' ప్రధాన కంటెంట్ ” ఇవి

మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించబడతాయి:

ప్రదర్శన: ఫ్లెక్స్ ;
సమలేఖనం-అంశాలు: కేంద్రం;

ఇక్కడ వివరణ ఉంది:

• ' ప్రదర్శన 'ఆస్తి' ఫ్లెక్స్ ” div లేఅవుట్ దాని మూలకానికి అనువైనదిగా చేయడానికి ఉపయోగించబడుతుంది.
• ' సమలేఖనం-అంశాలు 'CSS ప్రాపర్టీ' గా సెట్ చేయబడింది కేంద్రం ”, ఇది div మూలకాలను నిలువుగా సమలేఖనం చేస్తుంది.

అవుట్‌పుట్

CSSని ఉపయోగించి అన్ని బ్రౌజర్‌ల కోసం ఒక div ఎలిమెంట్‌ను నిలువుగా ఎలా కేంద్రీకరించాలో మీరు నేర్చుకున్నారు.

ముగింపు

ఒక div మూలకాన్ని నిలువుగా కేంద్రీకరించడానికి, CSS ' ప్రదర్శన 'ఆస్తి ఉపయోగించబడుతుంది' ఫ్లెక్స్ ' విలువ. ఈ విలువ

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