Կենտրոնացած: CSS-դասավորությունը

Երբ դասավորությունը էջում հաճախ անհրաժեշտ է կատարել կենտրոնացած CSS ճանապարհ. Օրինակ, պետք է կենտրոնացնել հիմնական միավորը: Կան մի քանի լուծումներ այս խնդրին, որոնցից յուրաքանչյուրը կարող է վաղ թե ուշ պետք է օգտագործել ցանկացած coder.

Հարթեցնել տեքստը կենտրոն

Հաճախ համար դեկորատիվ նպատակներով դուք ուզում եք սահմանել տեքստը, կենտրոնացած, CSS այս դեպքում, պետք է կրճատել ժամանակը պարտադրանք: Նախկինում դա արվում էր, օգտագործելով HTML-հատկանիշներ, բայց հիմա ստանդարտ պահանջվում է հարթեցնել տեքստը ոճով թերթիկ. Ի տարբերություն բլոկի, որի համար դուք ուզում եք փոխել արտաքին լիցք CSS հավասարեցում տեքստի մեջտեղում կատարվում է մեկ տողով:

• text-align: center;

Այս գույքը ժառանգել եւ անցել ծնողի բոլոր երեխաների համար: Այն ազդում է ոչ միայն տեքստը, այլ նաեւ այլ տարրերի. Այդ նպատակի համար, որ նրանք պետք է փոքրատառ (օրինակ, span) կամ տող թաղամաս (ցանկացած նյութից, որը սահմանում ցուցադրման գույքը: թաղամաս): Վերջինս տարբերակը նաեւ թույլ է տալիս Ձեզ փոխել լայնությունը եւ բարձրությունը տարր, ավելի ճկուն կոնֆիգուրացիա ատամիկ.

էջերը հաճախ հարթեցնել հատկանիշը իրեն հատկորոշիչը: Սա անմիջապես դարձնում կոդը անվավեր, քանի որ W3C խոստովանել align հատկանիշը հնացած: Օգտագործելով այն մի էջ, որը խորհուրդ չի տրվում:

Կենտրոնացած թաղամաս

Եթե դուք ուզում եք սահմանել համապատասխանեցնել div մեջտեղում, CSS կարող է առաջարկել բավականին հարմարավետ: օգտագործումը արտաքին լիցք միջակայքն. Լիցք կարելի է ձեւավորել, քանի որ բլոկի տարրերի եւ գիծ- բլոկում. Svoysva արժեքը պետք է լինի 0 (ուղղահայաց լիցք) եւ ավտո (ավտոմատ ատամիկ հորիզոնական):

• մարժա: 0 մեքենան;

Այժմ այս տարբերակը ճանաչվել է որպես բացարձակապես վավեր. Օգտագործելով Արտաքին լիցք նաեւ թույլ է տալիս Ձեզ սահմանել դասավորվածության կենտրոնում: CSS-մարժա գույքը մեզ թույլ է տալիս լուծել բազմաթիվ խնդիրներ կապված դիրքավորման տարր էջում:

Հավասարեցում ձախ կամ աջ եզրին բլոկի

Երբեմն, CSS ճանապարհ չի պահանջում հավասարեցում կենտրոնում, բայց դա անհրաժեշտ է տեղադրել հաջորդ երկու նյութից, մեկը ձախ կողմում, իսկ մյուսը `աջ: Համար, այս կա բոց գույքը, որը կարելի է վերցնել երեք արժեքների: Ձախ, աջ կամ ոչ մեկը: Եկեք ասում են, դուք ունեք երկու բլոկները, որոնք պետք է տեղադրված կողք կողքի. Ապա կոդը հետեւյալն է.

• .Left {բոց: Ձախ;}
• .Right {բոց: Աջ}

Եթե կա մի երրորդ թաղամաս, որը պետք է տեղակայված տակ առաջին երկու բլոկների (օրինակ, ստորագիր), ապա դա անհրաժեշտ է գրանցվել հստակ առանձնահատկությունից:

• .Left {բոց: Ձախ;}
• .Right {բոց: Աջ}
• ստորագիր {պարզ է: երկուսն էլ}

Այն փաստը, որ արգելափակում հետ դասերի ձախ եւ աջ աշնանը դուրս է ընդհանուր հոսքի, այսինքն, բոլոր մյուս տարրերը անտեսել է բուն գոյությունը տարրերի գաղափարը: Գույքի պարզ է: երկուսն էլ թույլ է տալիս էջատակի բլոկ կամ որեւէ այլ տեսանելի նստվածք է հոսքի բջիջների եւ արգելում փաթեթավորեք (float), այնպես էլ ձախ եւ աջ. Այդ իսկ պատճառով, մեր օրինակում, որ ստորագիր է տեղահանվել վայրընթաց.

ուղղահայաց հավասարեցում

Կան դեպքեր, երբ բավարար չէ, որպեսզի սահմանել դասավորվածության կենտրոնում CSS-եղանակներով, դուք նույնպես պետք է փոխվի ուղղահայաց դիրքորոշումը երեխայի բլոկում. Ցանկացած գիծ կամ տող թաղամաս տարր կարող է սեղմված դեմ վերին կամ ստորին եզրին, որը գտնվում է կեսին մայր տարրի կամ լինել կամայական վայրում: Առավել հաճախ պահանջում են հավասարեցում կենտրոնում թաղամաս, այն օգտագործում ուղղահայաց-align հատկանիշը. Ենթադրենք կան երկու բլոկների, մեկ nested ներսում, մյուսը. Այս ներսի միավորի վիճաբանություն-թաղամաս տարր (ցուցադրման: inline-block). Անհրաժեշտ է հարթեցնել ուղղահայաց բլոկ երեխային:

• հավասարեցում վերին սահմանի - .ՄԱՆԿԱԿԱՆ {ուղղահայաց-align: վերեւ};
• կենտրոնացած - .ՄԱՆԿԱԿԱՆ {ուղղահայաց-align: միջին};
• հավասարեցում ստորին եզրին - .ՄԱՆԿԱԿԱՆ {ուղղահայաց-align: ներքեւի};

Ժամը բլոկային տարրերի աուդիո text-align, կամ ուղղահայաց-align չի կիրառվում:

Հնարավոր հետ կապված խնդիրներ միավորվել միավորներով

Երբեմն էլ div հարթեցնել կենտրոնը CSS ճանապարհ կարող է առաջացնել մի փոքր դժվարություն: Օրինակ, երբ, օգտագործելով մի բոց, օրինակ, կան երեք արգելափակում: .առաջին, Երկրորդ եւ .Երրորդ: Երկրորդ եւ երրորդ արգելափակում ստում է առաջին. Տարերքը հետ դասի երկրորդ ձախ եզրին, իսկ վերջին թաղամաս - աջ կողմում: Այն բանից հետո, եր `երկու իջել է հոսքի: Եթե ծնողը տարրը սահմանված չէ բարձրությունը (օրինակ, 30em), այն դադարում է ձգվել բարձրության օժանդակ ստորաբաժանումների. Խուսափելու համար այս սխալ, օգտագործել է «ալբոմը», - հատուկ ստորաբաժանում, որը տեսնում է .Երկրորդ եւ .Երրորդ: CSS կոդ

• Երկրորդ {float: left}
• .Երրորդ {բոց: Աջ}
• .clearfix {բարձրություն: 0; պարզ: երկուսն էլ;}

Հայ թուրքական արձանագրությունները, հաճախ օգտագործվում: հետո, որը նույնպես թույլ է տալիս վերադարձնել նյութից մեջ տեղ ստեղծելով psevdorasporki (օրինակում է div հետ դասի ընկած ներսում կոնտեյներով եւ կազմում է .Առաջին. .Left եւ .Right):

• .Left {բոց: left}
• .Right {բոց: Աջ}
• .Աման: հետո {բովանդակությամբ ''; Ցուցադրել: սեղանի; պարզ: երկուսն էլ;}

Վերոհիշյալ տարբերակները, առավել տարածված, թեեւ կան որոշ տատանումները: Դուք միշտ կարող եք գտնել ամենահեշտ եւ առավել հարմար միջոց է ստեղծել psevdorasporki փորձեր:

Մեկ այլ խնդիր է հաճախ հանդիպող դասավորությունը - դասավորվածության գծի թաղամաս տարրերից. Այն բանից հետո, նրանցից յուրաքանչյուրը մի տարածք, որը ավելացված է ինքնաբերաբար. Կարգավորել այն օգնում է միջակայքն գույքը, որը սահմանված է բացասական ատամ: Կան նաեւ այլ ուղիներ, որոնք օգտագործվում են ավելի հաճախ, օրինակ, վերականգնվել է տառաչափը: Այս դեպքում, հատկությունների, ինչպես նաեւ մայր տարր է գրանցում font-size: 0. Եթե գտնվում է ներսում բլոկների տեքստի, հատկությունների գիծ-block տարրերի վերադարձել են ցանկալի տառաչափով: Օրինակ, font-size: 1em. Որ մեթոդը ոչ միշտ է հարմար, այնպես որ, այն շատ ավելի հաճախ օգտագործվում տարբերակը արտաքին margins.

Aligning Blocks թույլ է տալիս Ձեզ ստեղծել գեղեցիկ եւ ֆունկցիոնալ էջերը: ընդհանուր դասավորությունը եւ դասավորությունը եւ գտնվելու վայրը, ապրանքների խանութներում, եւ լուսանկարներ կայքում մի փոքր: