- చిత్రాన్ని డివిలో క్షితిజ సమాంతరంగా ఎలా కేంద్రీకరించాలి?
- మార్జిన్ ఆస్తి
- ఫ్లెక్స్‌బాక్స్ మాడ్యూల్
- గ్రిడ్ వీక్షణ లేఅవుట్
- స్థానం లక్షణం
చిత్రాన్ని డివిలో క్షితిజ సమాంతరంగా ఎలా కేంద్రీకరించాలి?
డెవలపర్ మార్జిన్ ప్రాపర్టీ, ఫ్లెక్స్‌బాక్స్ మాడ్యూల్, గ్రిడ్ వ్యూ లేఅవుట్ మరియు స్థాన లక్షణాన్ని divలో అడ్డంగా మధ్యలో ఉంచడానికి ఉపయోగించవచ్చు. div ట్యాగ్‌లో చిత్రాన్ని క్షితిజ సమాంతరంగా మధ్యకు సమలేఖనం చేయడానికి క్రింది గైడ్‌ని అనుసరించండి.
HTML ఫైల్‌లో చిత్రం ఈ విధంగా ఉంచబడిన ఒక div ఉందని మనం అనుకుందాం:
< div తరగతి = 'మూలం' >
< img src = '../book.jpg' ఎత్తు = 'యాభై%' వెడల్పు = 'యాభై%' తరగతి = 'చిత్రం' >
< / div >
చిత్రం 50% వెడల్పు మరియు ఎత్తు మరియు 'చిత్రం' తరగతిని పొందుతోంది.
మార్జిన్ ప్రాపర్టీని ఉపయోగించడం
వినియోగదారులు మార్జిన్ ప్రాపర్టీని ఉపయోగించి HTML మూలకాల చుట్టూ ఖాళీని జోడించవచ్చు. ఇది విండో స్క్రీన్ పరిమాణాన్ని మార్చిన తర్వాత అందుబాటులో ఉన్న స్థలం ప్రకారం మార్జిన్‌ను కేటాయిస్తుంది. ఉదాహరణకు, మార్జిన్-ఎడమ మరియు కుడి స్వయంచాలకంగా సెట్ చేస్తుంది మరియు డిస్ప్లే ప్రాపర్టీ బ్లాక్ చేయడానికి సెట్ చేయబడింది:
img {
ప్రదర్శన: బ్లాక్;
మార్జిన్-ఎడమ: ఆటో;
మార్జిన్-కుడి: ఆటో;
}
పై ఉదాహరణను అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
పై అవుట్‌పుట్ చిత్రం ఇప్పుడు మధ్యలో ఉన్నట్లు ప్రదర్శించబడింది.
Flexbox మాడ్యూల్ ఉపయోగించి
ది ' ఫ్లెక్స్ బాక్స్ ” అనేది పూర్తి లక్షణాల సమితిని కలిగి ఉన్న మాడ్యూల్. మా విషయంలో, రూట్ ఎలిమెంట్ క్లాస్‌ని ఎంచుకుని, ఫ్లెక్స్‌ని డిస్ప్లే ప్రాపర్టీ విలువగా ఉపయోగించండి. 'కి విలువగా కేంద్రాన్ని సెట్ చేయండి జస్టిఫై-కంటెంట్ 'మరియు' సమలేఖనం-అంశాలు 'గుణాలు:
.రూట్ {ప్రదర్శన: ఫ్లెక్స్;
న్యాయంచేయటానికి- విషయము : కేంద్రం;
సమలేఖనం-అంశాలు: కేంద్రం;
నేపథ్య- రంగు : నీలం;
}
కోడ్‌ని అమలు చేసిన తర్వాత వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
ఎగువ అవుట్‌పుట్, చిత్రం 'నీలం'కి నేపథ్య రంగును సెట్ చేసి, div మధ్యలో ప్రదర్శించబడిందని చూపిస్తుంది.
గ్రిడ్ వ్యూ లేఅవుట్ మాడ్యూల్ ఉపయోగించడం
గ్రిడ్ వీక్షణ లేఅవుట్ 12 నిలువు వరుసలను కలిగి ఉంది మరియు మొత్తం వెడల్పు 100%కి సెట్ చేయబడింది మరియు ఇది ప్రతి మూలకాన్ని వెబ్‌పేజీలో నిర్దిష్ట స్థానంలో ఉంచుతుంది:
.రూట్ {ప్రదర్శన: గ్రిడ్;
స్థలం-అంశాలు: కేంద్రం;
}
ఎగువ కోడ్ స్నిప్పెట్‌లో, “గ్రిడ్” విలువ డిస్ప్లే ప్రాపర్టీకి కేటాయించబడుతుంది. 'స్థానం-అంశం' అనేది 'జస్టిఫై-కంటెంట్' మరియు 'అలైన్-ఐటెమ్స్' లక్షణాల కోసం సంక్షిప్తలిపిగా ఉపయోగించబడింది:
గ్రిడ్ పద్ధతిని ఉపయోగించి చిత్రం div మధ్యలో ఉందని అవుట్‌పుట్ ధృవీకరిస్తుంది:
స్థాన లక్షణాన్ని ఉపయోగించడం
రూట్ క్లాస్ స్థానాన్ని సంబంధిత విలువకు మరియు ఇమేజ్ క్లాస్‌ను సంపూర్ణ విలువకు సెట్ చేయడం ద్వారా. చిత్రం div మధ్యలో ప్రదర్శించబడుతుంది:
.రూట్ {స్థానం: బంధువు;
}
.చిత్రం {
వెడల్పు : 700px;
ఎత్తు : 500px;
స్థానం: సంపూర్ణ;
ఎడమ: యాభై %;
రూపాంతరం: translateX ( - యాభై % ) ;
}
చిత్రం '50%' ఎడమవైపుకు తరలించబడింది మరియు X- అక్షం వద్ద తిరిగి '-50%'కి రూపాంతరం చెందుతుంది. ఇది div మధ్యలో ఉన్న చిత్రాన్ని అడ్డంగా ప్రదర్శిస్తుంది:
ఆ విధంగా చిత్రాన్ని divలో అడ్డంగా కేంద్రీకరించవచ్చు.
ముగింపు
చిత్రాన్ని ఒక div మూలకంలో అడ్డంగా సెట్ చేయడానికి, 'ని ఉపయోగించండి మార్జిన్ ',' ఫ్లెక్స్ మాడ్యూల్ ',' గ్రిడ్ లేఅవుట్ 'మరియు' స్థానం 'గుణాలు. ది ' మార్జిన్ ”ఎడమ మరియు కుడి యొక్క ఆస్తి ఆటోకు సెట్ చేయబడింది. “ఫ్లెక్స్ మాడ్యూల్” మరియు “గ్రిడ్ లేఅవుట్” డిస్‌ప్లేను వరుసగా ఫ్లెక్స్ మరియు గ్రిడ్‌కు సెట్ చేసి “ స్థలం అంశం 'చిత్రాన్ని మధ్యలో ఉంచడానికి ఆస్తి. స్థానం ప్రాపర్టీ మూల తరగతికి సంబంధించి విలువను సెట్ చేస్తుంది మరియు ఇమేజ్ క్లాస్‌కు సంపూర్ణంగా సెట్ చేస్తుంది మరియు 'ఎడమ' మరియు 'పరివర్తన' లక్షణాలను ఉపయోగిస్తుంది. ఈ బ్లాగ్ విజయవంతంగా divలో ఇమేజ్‌లను క్షితిజ సమాంతరంగా ఎలా మధ్యలో ఉంచాలో ప్రదర్శించింది.