కేంద్రీకృతం: CSS లేఅవుట్

పేజీ యొక్క లేఅవుట్ ఒక కేంద్రీకృత CSS-మార్గం చేయడానికి తరచుగా అవసరం: ఉదాహరణకు, ప్రధాన యూనిట్ సెంటర్. ముందుగానే లేదా తరువాత ఏ coder ఉపయోగించడానికి ఉంటుంది, వీటిలో ప్రతి ఈ సమస్యకు అనేక పరిష్కారాలను ఉన్నాయి.

సెంటర్ టెక్స్ట్ అలైన్

తరచుగా అలంకరణ ప్రయోజనాల కోసం మీరు విధించిన సమయాన్ని తగ్గిస్తాయి, ఈ సందర్భంలో కేంద్రీకృత టెక్స్ట్, CSS సెట్ చేయాలనుకుంటున్నారా. గతంలో ఈ HTML లక్షణాలను ఉపయోగించి జరిగింది, కానీ ఇప్పుడు ప్రామాణిక శైలి షీట్ తో టెక్స్ట్ align అవసరం. మీరు మధ్యలో ఒక వాక్యం తయారు చేస్తారు టెక్స్ట్ CSS సమలేఖనం బాహ్య పాడింగ్ మార్పు కోరుకుంటున్న కోసం బ్లాక్ విరుద్ధంగా:

• టెక్స్ట్-అలైన్: సెంటర్;

ఈ ఆస్తి వారసత్వంగా మరియు పేరెంట్ నుండి పిల్లలందరికీ ముగిసింది. ఇది మాత్రమే టెక్స్ట్ కానీ ఇతర మూలకాల ప్రభావితం చేస్తుంది. ఈ ప్రయోజనం కోసం, వారు చిన్న చేయాలి (ఉదా, span) లేదా వరుస బ్లాక్ (ఆ ప్రదర్శన ఆస్తి పేర్కొనండి ఏ బ్లాక్స్: బ్లాక్). వయసువారికి కూడా మీరు వెడల్పు మరియు మూలకం యొక్క ఎత్తు, ఇండెంటేషన్ని అనువైన ఆకృతీకరణ మార్చడానికి అనుమతిస్తుంది.

పేజీలు తరచుగా ట్యాగ్ తనను align లక్షణం. ఈ వెంటనే W3C align లక్షణం వాడుకలో తెలియజేసారు నుండి కోడ్ చెల్లదు చేస్తుంది. ఒక పేజీలో దీన్ని ఉపయోగించడం సిఫార్సు లేదు.

కేంద్రీకృత బ్లాక్

బాహ్య పాడింగ్ మార్జిన్ ఉపయోగించండి: మీరు మధ్యలో div అమరిక ఏర్పాటు చేయాలనుకుంటే, CSS చాలా సౌకర్యవంతమైన మార్గం అందించే. పాడింగ్ బ్లాక్ అంశాలు, మరియు లైన్ బ్లాక్ తెలుపవచ్చు. Svoysva విలువ 0 (నిలువు పాడింగ్), మరియు ఆటో (అడ్డంగా ఆటోమేటిక్ ఇండెంటేషన్ని) ఉండాలి:

• మార్జిన్: 0 ఆటో;

ఇప్పుడు ఈ ఎంపికను ఖచ్చితంగా చెల్లుబాటు అయ్యే గుర్తించబడింది. CSS మార్జిన్ ఆస్తి సంయుక్త పేజీలో స్థానాలు మూలకం సంబంధం ఉన్న అనేక సమస్యలు పరిష్కరించడానికి అనుమతిస్తుంది: బాహ్య పాడింగ్ ఉపయోగించి కూడా మీరు సెంటర్ అమరిక సెట్ అనుమతిస్తుంది.

బ్లాక్ యొక్క ఎడమ లేదా కుడి అంచు యొక్క అమరిక

కొన్నిసార్లు CSS-మార్గం సెంటర్ అమరిక అవసరం లేదు, కాని రాబోయే రెండు బ్లాకుల, ఎడమ వైపు నుండి ఒక మరియు ఇతర ఉంచాలి అవసరం - కుడి నుండి. ఈ మూడు విలువలు ఒకటి పట్టవచ్చు ఇది ఫ్లోట్ ఆస్తి, ఉంది: కుడి లేదా none, ఎడమ. మీరు పక్క పక్కనే అమర్చిన ఆ రెండు బ్లాక్స్ కలిగి చెప్పటానికి. అప్పుడు కోడ్ కింది విధంగా ఉంటుంది:

• .ఎడమ {ఫ్లోట్: ఎడమ;}
• .కుడి {float: right}

మొదటి రెండు బ్లాక్లు (ఉదా, ఫుటరు) కింద ఉన్న తప్పక మూడవ బ్లాక్, ఉందనుకోండి, అది స్పష్టమైన లక్షణం నమోదు అవసరం:

• .ఎడమ {ఫ్లోట్: ఎడమ;}
• .కుడి {float: right}
• ఫుటరు {తొలగించు: రెండు}

మొత్తం ప్రవాహం నుండి ఎడమ మరియు కుడి పతనం యొక్క తరగతులుగా బ్లాక్స్, ఆ, అన్ని ఇతర మూలకాలను సమలేఖనమైంది మూలకాలు చాలా సహోదరి నిర్లక్ష్యం వాస్తవం. ఆస్తి తొలగించు: రెండు ప్రవాహ ఘటాలు నుండి పరిచింది ఫుటరు బ్లాక్ లేదా ఏ ఇతర కనిపించే అనుమతిస్తుంది మరియు ఎడమ మరియు కుడి రెండు న చుట్టు (ఫ్లోట్) నిషేధించింది. అందువలన, మా ఉదాహరణలో, ఫుటరు కిందకి స్థానభ్రంశం.

నిలువు సమలేఖనం

CSS-మార్గాలు సెంటర్ అమరిక సెట్ సరిపోదు పేరు కేసులు ఉన్నాయి, మీరు కూడా పిల్లల బ్లాక్ యొక్క నిలువు స్థానం మార్చాలి. ఏదైనా సరళరేఖ లేదా అడ్డు-బ్లాక్ మూలకం, ఎగువ లేదా దిగువ అంచున వ్యతిరేకంగా ఒత్తిడి చేయవచ్చు పేరెంట్ మూలకం మధ్యలో ఉన్న లేదా ఏకపక్ష స్థానంలో. చాలా తరచుగా బ్లాక్ మధ్యలో అమరిక అవసరం, ఇది vertical-align లక్షణం ఉపయోగిస్తుంది. రెండు బ్లాక్లు, ఒక ఇతర లోపల యున్న ఉన్నాయి అనుకుందాం. వరుసగా బ్లాక్ మూలకం (: ఇన్లైన్-బ్లాక్ డిస్ప్లే) - ఈ ఇండోర్ యూనిట్ లో. ఇది నిలువు బ్లాక్ పిల్లల align అవసరం:

• ఎగువ సరిహద్దును అమరిక - .బాల {vertical-align: top};
• కేంద్రీకృతమై - .బాల {vertical-align: మధ్య};
• దిగువ అంచు అమరిక - .బాల {vertical-align: దిగువన};

బ్లాక్ మూలకాలు వద్ద ఆడియో text-align, లేదా vertical-align వర్తించదు.

సమలేఖనమైంది యూనిట్లు సాధ్యమైన సమస్యలు

కొన్నిసార్లు CSS-మార్గం మధ్యలో align div కొద్దిగా ఇబ్బంది కలిగిస్తుంది. ఉదాహరణకు, ఒక ఫ్లోట్ ఉపయోగిస్తున్నప్పుడు: చూపిస్తున్నది మొదటి, .రెండవ మరియు .మూడవ: ఉదాహరణకు, మూడు బ్లాక్స్ ఉన్నాయి. రెండవ మరియు మూడవ బ్లాక్స్ మొదటి మరలుతాయి. రెండవ ఎడమ సమలేఖనమైంది ఒక తరగతి ఒక మూలకం, మరియు చివరి బ్లాక్ - కుడి. అమర్చడానికి తర్వాత రెండు స్ట్రీమ్ నుండి పడిపోయింది. పేరెంట్ మూలకం ఎత్తు నిర్వచించిన చేయకపోతే (ఉదా, 30em), ఇది అనుబంధ యూనిట్లు యొక్క ఎత్తు చాచు నిలిపివేస్తుంది. .రెండవ మరియు .మూడవ చూడగల ఒక ప్రత్యేక యూనిట్, - ఈ లోపం నివారించేందుకు, "స్పేసర్" ఉపయోగించండి. CSS కోడ్:

• .రెండవ {తేలుతూ: ఎడమ}
• .మూడవ {float: right}
• .clearfix {ఎత్తు: 0; తొలగించు: రెండు;}

నకిలీ తరచుగా ఉపయోగించే: తరువాత, కూడా psevdorasporki సృష్టించడం ద్వారా స్థలం దిమ్మలను తిరిగి అనుమతిస్తుంది (తరగతి div లో ఉదాహరణలో కంటైనర్ లోపల ఉంది మరియు ఒక పని .మొదటి .సరైన మరియు .కుడి వుంటారు):

• .ఎడమ {ఫ్లోట్: ఎడమ}
• .కుడి {float: right}
• కంటైనర్: {కంటెంట్ తర్వాత: ''; ప్రదర్శన: పట్టిక; తొలగించు: రెండు;}

పైన ఎంపికలు - అత్యంత సాధారణ, కొన్ని భిన్నత్వాలు ఉన్నప్పటికీ. మీరు ఎల్లప్పుడూ ప్రయోగాలు psevdorasporki సృష్టించడానికి సులభమైన మరియు అత్యంత అనుకూలమైన మార్గం వెదుక్కోవచ్చు.

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

సాధారణ లేఅవుట్ మరియు లేఅవుట్ మరియు దుకాణాలు వస్తువుల స్థానాన్ని, మరియు ఫోటోలు ఒక చిన్న సైట్లో: బ్లాక్స్ అమర్చడానికి మీరు అందమైన మరియు ఫంక్షనల్ పేజీలు సృష్టించడానికి అనుమతిస్తుంది.