వెబ్సైట్లు నిర్మించేటప్పుడు సెంటర్ చిత్రాలు, టెక్స్ట్ మరియు బ్లాకు అంశాలు
మీరు వెబ్సైట్లు ఎలా నిర్మించాలో తెలుసుకుంటే , మీరు బ్రౌజర్ మాదిరిగానే వుండే అత్యంత సాధారణ మాయలు ఒకటి, బ్రౌజర్ విండోలో ఎలాంటి అంశాలతో ఉంటుంది. ఇది పేజీలో ఒక చిత్రం కేంద్రీకృతమై ఉండవచ్చు లేదా నమూనాలో భాగంగా హెడ్లైన్స్ వంటి కేంద్రం సమర్థించడం టెక్స్ట్ కావచ్చు.
క్యాస్కేడింగ్ స్టైల్ షీట్స్ (CSS) ఉపయోగించి కేంద్రీకృత చిత్రాలు లేదా టెక్స్ట్ లేదా మీ మొత్తం వెబ్పేజీ యొక్క ఈ దృశ్య రూపాన్ని సాధించడానికి సరైన మార్గం. మధ్యలో కోసం లక్షణాలు చాలా CSS 1.0 నుండి CSS లో ఉన్నాయి, మరియు వారు CSS3 మరియు ఆధునిక వెబ్ బ్రౌజర్లు గొప్ప పని.
వెబ్ డిజైన్ యొక్క అనేక అంశాలలాగే, వెబ్ పేజీలో సెంటర్ మూలకాలకు CSS ను ఉపయోగించడానికి పలు మార్గాలు ఉన్నాయి. ఈ విజువల్ లుక్ సాధించడానికి CSS ను ఉపయోగించటానికి కొన్ని రకాలుగా పరిశీలించండి.
HTML లో సెంటర్ మూలకాలకు CSS ఉపయోగించి యొక్క అవలోకనం
CSS తో మధ్యలో ఈ ఒక దృశ్య శైలి సాధించడానికి చాలా వివిధ మార్గాలు ఉన్నాయి ఎందుకంటే వెబ్ డిజైనర్లు ప్రారంభించి ఒక సవాలుగా ఉంటుంది. వివిధ పద్దతులు అన్ని మూలకాలపై పనిచేయవు అని తెలిసే మంచి లేదా రుచికోసంగల వెబ్ డెవలపర్లు కావచ్చు, ఇది కొత్త వెబ్ నిపుణుల కోసం తీవ్రంగా సవాలు చేయవచ్చు, ఎందుకంటే ఎన్నో రకాల పద్ధతులు ఏ పద్ధతిని ఉపయోగించాలో తెలుసుకోవాలనుకుంటాయి. కొన్ని ఉత్తమ విధానాలను అవగాహన చేసుకోవడం ఉత్తమం. మీరు వాటిని వాడటం ప్రారంభించినప్పుడు, మీరు ఏ సందర్భాలలో ఉత్తమంగా పని చేస్తారో తెలుసుకుంటారు.
అధిక స్థాయిలో, మీరు వీటిని CSS ను ఉపయోగించవచ్చు:
- కేంద్ర వచనం
- సెంటర్ బ్లాక్-స్థాయి మూలకం (ఒక డివిజన్ లాగా)
- ఒక చిత్రం కేంద్రం
- నిలువుగా ఒక బ్లాక్ లేదా ఒక చిత్రం మధ్యలో
అనేక (అనేక) సంవత్సరాల క్రితం, వెబ్ డిజైనర్లు
CSS తో టెక్స్ట్ మధ్యలో
వెబ్పేజీలో కేంద్రం యొక్క సులభమైన విషయం టెక్స్ట్. టెక్స్ట్-సమలేఖనం: దీన్ని చేయటానికి మీరు తెలుసుకోవలసిన ఏకైక శైలి లక్షణం ఉంది. క్రింద CSS శైలిని తీసుకోండి, ఉదాహరణకు:
p.center {text-align: center; }
CSS యొక్క ఈ లైన్తో, కేంద్ర తరగతితో వ్రాసిన ప్రతి పేరా దాని మాతృ మూలకం లోపల అడ్డంగా కేంద్రీకృతమై ఉంటుంది. ఉదాహరణకు, పేరా ఒక విభజన లోపల ఉంటే, అంటే అది ఆ డివిజన్ యొక్క బిడ్డ, అది
HTML పత్రంలో దరఖాస్తు చేసిన ఈ తరగతికి ఉదాహరణ:
ఈ టెక్స్ట్ కేంద్రీకృతమైంది.
టెక్స్టు-ఎలైన్ ఆస్తితో వచనాన్ని కేంద్రీకరిస్తున్నప్పుడు, దాని మూలకం లోపల కేంద్రీకృతమై ఉండాలని గుర్తుంచుకోండి మరియు పూర్తి పేజీలోనే కేంద్రీకృతమై ఉండకూడదు. అలాగే, కేంద్రీకృతమైన వచనం పెద్ద బ్లాక్స్ చదివే కష్టంగా ఉంటుందని గుర్తుంచుకోండి, కాబట్టి ఈ శైలిని తక్కువగా ఉపయోగించుకోండి. హెడ్లైన్స్ మరియు చిన్న వ్యాసాలు, వ్యాసం లేదా ఇతర విషయాల కోసం టీజర్ పాఠం వంటివి కేంద్రీకృతమైతే చదివి వినిపించటం చాలా సులభం, కానీ పూర్తి వ్యాసం లాంటి వచనం యొక్క పెద్ద బ్లాక్స్, కంటెంట్ పూర్తిగా కేంద్రమైతే తినడానికి సవాలుగా ఉంటుంది. సమర్థించడం. గుర్తుంచుకోండి, వెబ్సైట్ టెక్స్ట్ వచ్చినప్పుడు చదవదగ్గ ఎల్లప్పుడూ కీలకం !
CSS తో కంటెంట్ యొక్క బ్లాక్స్ మధ్యలో
బ్లాక్స్ మీ పేజీలో నిర్వచించిన వెడల్పును కలిగి ఉంటాయి మరియు ఒక బ్లాక్ స్థాయి మూలకం వలె స్థాపించబడతాయి. తరచుగా, ఈ బ్లాక్స్ HTML
div.center {
మార్జిన్: 0 ఆటో;
వెడల్పు: 80;
}
మార్జిన్ ఆస్తి కోసం ఈ CSS షార్ట్హ్యాండ్ ఎడమ మరియు కుడి "ఆటో" ను ఉపయోగించినప్పుడు, 0 యొక్క విలువకు ఎగువ మరియు దిగువ అంచులను సెట్ చేస్తుంది. ఇది తప్పనిసరిగా అందుబాటులో ఉన్న ఖాళీని మరియు వీక్షణపోర్ట్ విండో యొక్క రెండు వైపుల మధ్య సమానంగా విభజిస్తుంది, సమర్థవంతంగా పేజీలోని మూలకాన్ని కేంద్రీకరిస్తుంది.
ఇక్కడ ఇది HTML లో వర్తించబడుతుంది:
కానీ లోపల ఉన్న టెక్స్ట్ సమలేఖనమైంది.
మీ బ్లాక్ ఒక నిర్దిష్ట వెడల్పు కలిగి ఉన్నంతవరకు, అది ఉన్న మూలకం లోపల కేంద్రంగా ఉంటుంది. ఆ బ్లాక్లో ఉన్న వచనం దానిలో కేంద్రీకృతమై ఉండదు, కానీ ఎడమ-సమర్థించడం జరుగుతుంది. ఇది వెబ్ బ్రౌజర్స్లో డిఫాల్ట్లో ఎడమ-సమైక్యత ఉన్నందున ఇది టెక్స్ట్. పాఠ్యపుస్తకాన్ని మీరు కోరుకుంటే, మీరు ముందుగా కవర్ చేసిన టెక్స్ట్-ఎలైన్ ఆస్తిని ఈ విభాగానికి కేంద్రంగా విభజించడానికి ఉపయోగించవచ్చు.
CSS తో చిత్రాలు మధ్యలో
చాలా బ్రౌజర్లు మేము ఇప్పటికే పేరా కోసం చూశారు అదే టెక్స్ట్-align ఆస్తి ఉపయోగించి కేంద్రీకృతమై చిత్రాలను ప్రదర్శిస్తుంది, ఇది W3C ద్వారా సిఫార్సు లేదు వంటి సాంకేతికత మీద ఆధారపడి మంచి ఆలోచన కాదు. ఇది సిఫారసు చేయబడనందున, ఈ పద్దతిని విస్మరించటానికి బ్రౌజర్ యొక్క భవిష్య సంస్కరణలను ఎన్నుకోవచ్చని ఒక అవకాశం ఉంది.
టెక్స్ట్ను సమలేఖనం చేయడానికి బదులుగా ఒక చిత్రంపై కేంద్రీకరించడానికి, మీరు చిత్రం బ్రౌజర్ బ్లాక్ స్థాయి మూలకం అని స్పష్టంగా తెలియజేయాలి. ఈ విధంగా, ఏ ఇతర బ్లాక్ అయినా మీరు దానిని కేంద్రీకరించవచ్చు. ఇది జరిగేలా చేయడానికి ఇక్కడ CSS ఉంది:
img.center {
ప్రదర్శన: బ్లాక్;
మార్జిన్-ఎడమ: ఆటో;
మార్జిన్-కుడి: ఆటో;
}
మరియు ఇక్కడ HTML అని మేము కోరుకునే చిత్రం కోసం:
మీరు కూడా CSS వస్తువులు (క్రింద చూడండి) ఉపయోగించి సెంటర్ వస్తువులు, కానీ మీ HTML మార్కప్ లోకి దృశ్య శైలులు జతచేస్తుంది నుండి ఈ విధానం సిఫార్సు లేదు. గుర్తుంచుకోండి, మేము శైలి మరియు నిర్మాణం వేరు చేయాలనుకుంటున్నాము, అందువల్ల మీ HTML కోడ్ను విభజనతో విడదీయటంతో CSS శైలులను జోడించడం మరియు సాధ్యమైనప్పుడు ఇది తప్పించకూడదు.
సెంటింగ్ ఎలిమెంట్స్ CSS తో నిలువుగా
సెంటరింగ్ వస్తువులు నిలువుగా ఎల్లప్పుడూ వెబ్ డిజైన్ లో సవాలు ఉంది, కానీ CSS3 లో ఫ్లెక్సిబుల్ బాక్స్ లేఅవుట్ మాడ్యూల్ విడుదల తో, దీన్ని ఇప్పుడు ఒక మార్గం ఉంది.
లంబ సమలేఖనం సమానంగా సమాంతర అమరిక పైన పనిచేస్తుంది. CSS ఆస్తి మధ్య విలువతో నిలువుగా-సమలేఖనం.
.vcenter {
నిలువు-సమలేఖనం: మధ్యలో;
}
మరింత ఈ కొత్త CSS లేఅవుట్ పద్ధతి చుట్టూ వస్తున్న అయితే ఈ విధానం ఇబ్బంది అన్ని బ్రౌజర్లు, CSS FlexBox మద్దతు ఉంది! నిజానికి, నేడు అన్ని ఆధునిక బ్రౌజర్లు ఇప్పుడు ఈ CSS శైలికి మద్దతు ఇస్తాయి. దీని అర్థం Flexbox తో మీ మాత్రమే ఆందోళనలు పాత బ్రౌజర్ సంస్కరణ.
మీరు పాత బ్రౌజర్లతో సమస్యలను కలిగి ఉంటే, W3C మీరు ఈ క్రింది పద్ధతిని ఉపయోగించి ఒక కంటైనర్లో నిలువుగా మధ్యలో టెక్స్ట్ని సిఫార్సు చేస్తున్నాము:
- ఒక DIV వంటి ఉన్న మూలకం లోపల కేంద్రీకృతమై వున్న అంశాలను ఉంచండి.
- ఉన్న మూలకం మీద కనిష్ట ఎత్తుని సెట్ చేయండి.
- పట్టిక ఘట్టంగా ఉన్న మూలకాన్ని కలిగి ఉన్నట్లు ప్రకటించండి.
- నిలువు సమలేఖనాన్ని "మధ్య" గా సెట్ చేయండి.
ఉదాహరణకు, ఇక్కడ CSS ఉంది:
.vcenter {
కనిష్ట ఎత్తు: 12 ని;
ప్రదర్శన: పట్టిక-సెల్;
నిలువు-సమలేఖనం: మధ్యలో;
}
మరియు ఇక్కడ HTML:
ఈ టెక్స్ట్ నిలువుగా బాక్స్లో కేంద్రీకృతమై ఉంది.
లంబ సెంటరింగ్ మరియు ఇంటర్నెట్ ఎక్స్ప్లోరర్ యొక్క పాత సంస్కరణలు
ఇంటర్నెట్ ఎక్స్ప్లోరర్ (IE) ను సెంటర్కు బలవంతం చేయటానికి కొన్ని మార్గాలు ఉన్నాయి మరియు తరువాత IE మాత్రమే శైలులను చూస్తుంది, కానీ అవి ఒక బిట్ వెర్బేస్ మరియు అగ్లీ. శుభవార్త IE యొక్క పాత సంస్కరణలకు మద్దతునిచ్చేందుకు Microsoft యొక్క ఇటీవలి నిర్ణయంతో, ఆ మద్దతులేని బ్రౌజర్లు త్వరలోనే తమ మార్గంలోనే ఉండాలి, వెబ్ డిజైనర్లు CSS FlexBox వంటి ఆధునిక నమూనా విధానాలను ఉపయోగించడం సులభం అవుతుంది, ఇది అన్ని CSS లేఅవుట్లను చేస్తుంది, అన్ని వెబ్ డిజైనర్లు మరింత సులభంగా, కేంద్రీకృతం కాదు.