Հեղինակից.Կրկին ողջունում եմ ձեզ մեր բլոգի էջերում: Այսօրվա հոդվածում ես կցանկանայի խոսել տարբեր հավասարեցման տեխնիկայի մասին, որոնք կարող են կիրառվել ինչպես բլոկների, այնպես էլ դրանց բովանդակության վրա: Մասնավորապես, ինչպես հավասարեցնել բլոկները css-ում, ինչպես նաև տեքստի հավասարեցում:

Բլոկների հավասարեցում դեպի կենտրոն

Css-ում բլոկը կենտրոնին հավասարեցնելը հեշտ է: Սա շատերի համար ամենահայտնի տեխնիկան է, բայց ես կուզենայի այդ մասին պատմել հենց հիմա, առաջին հերթին։ Ենթադրվում է, որ այն կենտրոնացված է հորիզոնական՝ մայր տարրի նկատմամբ: Ինչպե՞ս է դա արվում։ Ենթադրենք, մենք ունենք կոնտեյներ և մեր թեստային առարկան դրանում է.

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Ենթադրենք, որ սա կայքի վերնագիրն է։ Այն չի տարածվում պատուհանի ամբողջ լայնությամբ, և մենք պետք է այն կենտրոնացնենք: Մենք գրում ենք այսպես.

#վերնագիր ( լայնությունը / առավելագույնը - լայնությունը՝ 800px; լուսանցք: 0 ավտոմատ;

Մենք պետք է նշենք ճշգրիտ կամ առավելագույն լայնությունը, այնուհետև գրենք հիմնական հատկությունը՝ լուսանցք՝ 0 auto: Այն սահմանում է մեր վերնագրի լուսանցքները, առաջին արժեքը վերևի և ներքևի լուսանցքներն են, իսկ երկրորդը աջ և ձախ լուսանցքներն են: Ավտոմատ արժեքը զննարկիչին հուշում է ավտոմատ կերպով հաշվարկել լցոնումը երկու կողմերից այնպես, որ տարրը հենց իր մայրի կենտրոնում լինի: Հարմարավետ!

Տեքստի հավասարեցում

Սա նույնպես շատ պարզ հնարք է։ Բոլոր ներդիր տարրերը հավասարեցնելու համար կարող եք օգտագործել text-align հատկությունը և դրա արժեքները՝ ձախ, աջ, կենտրոն: Վերջինս կենտրոնացնում է տեքստը, ինչը մեզ անհրաժեշտ է: Նույնիսկ նկարը կարող է հավասարեցվել նույն ձևով, քանի որ այն նաև լռելյայն տարր է:

Հավասարեցնել տեքստը ուղղահայաց

Բայց սա ավելի բարդ է: Լռելյայնորեն, չկա պարզ, հայտնի հատկություն, որը հեշտությամբ կենտրոնացնում է տեքստը բլոկային կոնտեյներով ուղղահայաց: Այնուամենայնիվ, կան մի քանի տեխնիկա, որոնք դասավորության դիզայներները եկել են տարիների ընթացքում:

Սահմանեք բլոկի բարձրությունը՝ օգտագործելով լիցք: Ճանապարհը ոչ թե բացահայտ բարձրություն սահմանելն է՝ օգտագործելով բարձրությունը, այլ այն արհեստականորեն ստեղծել՝ օգտագործելով բարձիկներ վերևում և ներքևում, որոնք պետք է լինեն նույնը: Եկեք ստեղծենք ցանկացած բլոկ և դրան գրենք հետևյալ հատկությունները.

div (ֆոն՝ #cccc; լիցք՝ 30px 0;)

div ( ֆոն՝ #ccc; լիցք՝ 30px 0;

Ֆոնը պարզապես եզրերը տեսողականորեն տեսնելու համար է, ինչպես նաև լիցք: Այժմ բլոկի բարձրությունը կազմված է այս երկու հատվածներից և հենց գծից, և ամեն ինչ այսպիսի տեսք ունի.

Սահմանեք գծի բարձրությունը բլոկի համար: Ինձ թվում է, որ սա ավելի ճիշտ միջոց է, եթե անհրաժեշտ է տեքստի մեկ տող հավասարեցնել: Դրանով դուք կարող եք գրել բարձրությունը նորմալ ձևով՝ օգտագործելով height հատկությունը։ Դրանից հետո նա նաև պետք է սահմանի գծի բարձրությունը նույնը, ինչ բլոկի բարձրությունը որպես ամբողջություն:

div (բարձրությունը՝ 60px; գծի բարձրությունը՝ 60px;)

div ( բարձրությունը՝ 60px; գիծ - բարձրություն՝ 60px;

Արդյունքը նման կլինի վերը նշված նկարին։ Ամեն ինչ կաշխատի, նույնիսկ եթե լիցք ավելացնեք: Այնուամենայնիվ, միայն մեկ տողի համար: Եթե ​​տարրում ձեզ ավելի շատ տեքստ է անհրաժեշտ, այս մեթոդը չի աշխատի:

Բլոկը փոխարկեք աղյուսակի բջիջի: Այս մեթոդի էությունն այն է, որ ուղղահայաց-հավասարեցնել. միջին հատկությունը գործում է սեղանի բջիջի վրա, որը կենտրոնացնում է տարրը ուղղահայաց: Համապատասխանաբար, այս դեպքում բլոկը պետք է սահմանվի հետևյալ կերպ.

div (ցուցադրում՝ աղյուսակ-բջիջ; ուղղահայաց հարթեցում՝ միջին;)

div ( ցուցադրում: աղյուսակ - բջիջ; ուղղահայաց - հարթեցում `միջին;

Այս մեթոդի լավ կողմն այն է, որ դուք կարող եք կենտրոնացնել այնքան տեքստ, որքան ցանկանում եք: Բայց այն բլոկի համար, որտեղ տեղադրված է մեր div-ը, ավելի լավ է գրանցել ցուցադրումը՝ աղյուսակ, հակառակ դեպքում այն ​​կարող է չաշխատել:

Դե, այստեղ մենք հասնում ենք այսօրվա վերջին տեխնիկային՝ բլոկների ուղղահայաց դասավորությանը: Պետք է ասել, որ այստեղ կրկին չկա սեփականություն, որը նախատեսված է հատուկ դրա համար, բայց կան մի քանի հնարքներ, որոնց մասին պետք է տեղյակ լինել։

Սահմանեք նահանջները տոկոսներով: Եթե ​​դուք գիտեք մայր տարրի բարձրությունը և դրեք դրա մեջ մեկ այլ բլոկ տարր, ապա կարող եք այն կենտրոնացնել՝ օգտագործելով տոկոսային լիցք: Օրինակ, ծնողը 600px բարձր է: Դուք դրա մեջ բլոկ եք դնում, որի բարձրությունը 300px է: Որքա՞ն վերևից և ներքևից պետք է հետ կանգնեք այն կենտրոնացնելու համար: Յուրաքանչյուրը 150 պիքսել, որը ծնողի հասակի 25%-ն է։

Այս մեթոդը թույլ է տալիս կենտրոնացնել միայն այն դեպքում, երբ չափերը թույլ են տալիս հաշվարկներ կատարել: Իսկ եթե քո ծնողը 887 պիքսել է, ուրեմն հաստատ ոչինչ չես կարողանա գրել, դա հասկանալի է։

Տեղադրեք տարր աղյուսակի բջիջում: Կրկին, եթե մենք վերափոխենք մայր տարրը աղյուսակի բջիջի, ապա դրա մեջ տեղադրված բլոկը ավտոմատ կերպով կկենտրոնացվի ուղղահայաց: Դա անելու համար ծնողը պարզապես պետք է սահմանի ուղղահայաց հավասարեցում՝ միջին:

Իսկ եթե սրանից բացի գրենք նաև լուսանցք՝ 0 auto, ապա տարրը կլինի կենտրոնում նաև հորիզոնական։

CSS-ով տարրերի ուղղահայաց կենտրոնացումը մարտահրավեր է մշակողների համար: Այնուամենայնիվ, կան դրա լուծման մի քանի մեթոդներ, որոնք բավականին պարզ են. Այս դասում ներկայացված են բովանդակության ուղղահայաց կենտրոնացման 6 տարբերակ:

Սկսենք խնդրի ընդհանուր նկարագրությունից։

Ուղղահայաց կենտրոնացման խնդիր

Հորիզոնական կենտրոնացումը շատ պարզ և հեշտ է: Երբ կենտրոնացված տարրը միացված է, օգտագործեք «parent-align» հատկությունը: Երբ տարրը հիմնված է բլոկների վրա, մենք սահմանում ենք դրա լայնությունը և ավտոմատ կերպով սահմանում ձախ և աջ լուսանցքները:

Մարդկանց մեծամասնությունը, երբ օգտագործում է text-align: հատկությունը, վերաբերում է ուղղահայաց հավասարեցման հատկությանը, որպեսզի կենտրոնանա ուղղահայաց: Ամեն ինչ բավականաչափ տրամաբանական է թվում։ Եթե ​​դուք օգտագործել եք աղյուսակային ձևանմուշներ, հավանաբար շատ եք օգտագործել valign հատկանիշը, որն ամրապնդում է այն համոզմունքը, որ ուղղահայաց հավասարեցումը ճիշտ ճանապարհն է:

Բայց valign հատկանիշն աշխատում է միայն աղյուսակի բջիջների վրա: Եվ ուղղահայաց հավասարեցման հատկությունը շատ նման է դրան: Այն նաև ազդում է աղյուսակի բջիջների և որոշ ներդիր տարրերի վրա:

Ուղղահայաց հավասարեցման հատկության արժեքը գործում է մայր ներգծային տարրի նկատմամբ:

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

Ցավոք, ուղղահայաց հավասարեցման հատկությունը որևէ ազդեցություն չունի բլոկի մակարդակի տարրերի վրա (օրինակ՝ պարբերությունները div տարրի ներսում): Այս իրավիճակը կարող է հանգեցնել այն մտքին, որ ուղղահայաց դասավորության խնդիրը լուծում չունի։

Բայց կան բլոկի տարրերի կենտրոնացման այլ մեթոդներ, որոնց ընտրությունը կախված է նրանից, թե ինչն է կենտրոնացված արտաքին կոնտեյների հետ կապված:

Գծի բարձրության մեթոդ

Այս մեթոդն աշխատում է, երբ ցանկանում եք ուղղահայաց կենտրոնացնել տեքստի մեկ տող: Ընդամենը պետք է սահմանել տողի բարձրությունը տառատեսակի չափից մեծ:

Լռելյայնորեն, ազատ տարածքը հավասարապես կբաշխվի տեքստի վերևում և ներքևում: Եվ գիծը կկենտրոնացվի ուղղահայաց: Հաճախ գծի բարձրությունը հավասար է տարրի բարձրությանը:

HTML:

CSS:

#երեխա (գծի բարձրությունը՝ 200px;)

Այս մեթոդն աշխատում է բոլոր բրաուզերներում, թեև այն կարող է օգտագործվել միայն մեկ տողի համար: Օրինակում 200 px արժեքը ընտրված է կամայականորեն: Կարող է օգտագործվել տեքստի տառաչափից մեծ ցանկացած արժեք:

Պատկերի կենտրոնացում՝ օգտագործելով գծի բարձրությունը

Իսկ եթե բովանդակությունը նկար է: Արդյո՞ք վերը նշված մեթոդը կաշխատի: Պատասխանը գտնվում է CSS-ի ևս մեկ տողում:

HTML:

CSS:

#parent (գծի բարձրությունը՝ 200px;) #parent img (ուղղահայաց հարթեցում՝ միջին;)

Գծի բարձրության հատկության արժեքը պետք է լինի ավելի մեծ, քան պատկերի բարձրությունը:

CSS աղյուսակների մեթոդ

Վերևում նշվեց, որ ուղղահայաց հավասարեցնել հատկությունը վերաբերում է աղյուսակի բջիջներին, որտեղ այն հիանալի է աշխատում։ Մենք կարող ենք մեր տարրը մատուցել որպես աղյուսակի բջիջ և դրա համար օգտագործել ուղղահայաց հավասարեցում հատկությունը՝ բովանդակությունը ուղղահայաց կենտրոնացնելու համար:

Նշում: CSS աղյուսակը նույնը չէ, ինչ HTML աղյուսակը:

HTML:

CSS:

#ծնող (ցուցադրում՝ աղյուսակ;) #երեխա (ցուցադրում՝ աղյուսակ-բջիջ; ուղղահայաց հարթեցում՝ միջին;)

Մենք սահմանում ենք աղյուսակային ելքը մայր div-ի համար, իսկ nested div-ը թողարկվում է որպես աղյուսակի բջիջ: Այժմ դուք կարող եք օգտագործել ուղղահայաց հավասարեցման հատկությունը ներքին տարայի վրա: Դրանում ամեն ինչ ուղղահայաց կենտրոնացված կլինի:

Ի տարբերություն վերը նշված մեթոդի, այս դեպքում բովանդակությունը կարող է դինամիկ լինել, քանի որ div տարրը կփոխի չափերը՝ համապատասխանեցնելով իր բովանդակությանը:

Այս մեթոդի թերությունն այն է, որ այն չի աշխատում IE-ի հին տարբերակներում: Մենք պետք է օգտագործենք ցուցադրությունը՝ inline-block հատկությունը nested container-ի համար:

Բացարձակ դիրքավորում և բացասական մարժան

Այս մեթոդը գործում է նաև բոլոր բրաուզերներում: Բայց դա պահանջում է, որ կենտրոնացված տարրին տրվի բարձրություն:

Օրինակի կոդը միաժամանակ կատարում է հորիզոնական և ուղղահայաց կենտրոնացում.

HTML:

CSS:

#ծնող (պաշտոնը՝ հարաբերական;) #երեխա (դիրքը՝ բացարձակ; վերևում՝ 50%, ձախը՝ 50%, բարձրությունը՝ 30%, լայնությունը՝ 50%, լուսանցքը՝ -15% 0 0 -25%;)

Նախ, մենք սահմանում ենք տարրերի դիրքավորման տեսակը: Այնուհետև, nested div-ի համար, վերին և ձախ հատկությունները սահմանեք 50%, որը հանդիսանում է ծնողի կենտրոնը: Բայց տեղադրված տարրի վերին ձախ անկյունը կենտրոնացած է: Հետևաբար, դուք պետք է բարձրացնեք այն (բարձրության կեսը) և տեղափոխեք ձախ (լայնության կեսը), այնուհետև կենտրոնը կհամընկնի մայր տարրի կենտրոնի հետ: Այսպիսով, տարրի բարձրության իմացությունն այս դեպքում անհրաժեշտ է։ Այնուհետև տարրը դրեք բացասական վերևի և ձախ եզրերի վրա, որոնք հավասար են համապատասխանաբար բարձրության և լայնության կեսին:

Այս մեթոդը չի աշխատում բոլոր բրաուզերներում:

Բացարձակ դիրքավորում և ձգում

Օրինակի կոդը կատարում է ուղղահայաց և հորիզոնական կենտրոնացում:

HTML:

CSS:

#ծնող (դիրքը՝ հարաբերական;) #երեխա (դիրքը՝ բացարձակ; վերև՝ 0; ներքև՝ 0; ձախ՝ 0; աջ՝ 0; լայնություն՝ 50%, բարձրություն՝ 30%, լուսանցք՝ ավտոմատ;)

Այս մեթոդի հիմքում ընկած գաղափարն այն է, որ ներկառուցված տարրը ձգվի մայր տարրի բոլոր 4 սահմանների վրա՝ վերևի, ներքևի, աջ և ձախ հատկությունները դնելով 0-ի:

Բոլոր կողմերից այն ավտոմատ ձևավորելու եզրագծերի վրա դնելը բոլոր 4 կողմերում հավասար արժեքներ կսահմանի և մեր ներկառուցված div տարրը կկենտրոնացվի մայր տարրի վրա:

Ցավոք, այս մեթոդը չի աշխատում IE7-ում և ստորև:

Վերևի և ներքևի հավասար եզրեր

Այս մեթոդը բացահայտորեն սահմանում է հավասար լուսանցքներ մայր տարրի վերևում և ներքևում:

HTML:

CSS:

#ծնող (լիցք՝ 5% 0;) #երեխա (լիցք՝ 10% 0;)

Օրինակ CSS կոդը սահմանում է վերևի և ներքևի լուսանցքները երկու տարրերի համար: Տեղադրված տարրի համար լիցք դնելը կծառայի ուղղահայաց կենտրոնացման համար: Իսկ մայր տարրի լիցքը կկենտրոնացնի իր մեջ տեղադրված տարրը:

Հարաբերական միավորներն օգտագործվում են տարրերը դինամիկ չափափոխելու համար: Իսկ բացարձակ միավորների համար հաշվարկներ պետք է արվեն։

Օրինակ, եթե մայր տարրի բարձրությունը 400px է, իսկ տեղադրված տարրը՝ 100px, ապա պահանջվում է 150px վերևի և ներքևի լուսանցքներ:

150 + 150 + 100 = 400

%-ի օգտագործումը թույլ է տալիս հաշվարկները թողնել դիտարկիչին:

Այս մեթոդը գործում է ամենուր։ Բացասական կողմը հաշվարկների անհրաժեշտությունն է:

Նշում:Այս մեթոդն աշխատում է տարրի արտաքին լցոնումը սահմանելով: Դուք կարող եք նաև օգտագործել լուսանցքները տարրի ներսում: Լուսանցքներ կամ լիցք օգտագործելու որոշումը պետք է կայացվի՝ կախված նախագծի առանձնահատկություններից:

Լողացող դիվ

Այս մեթոդը օգտագործում է դատարկ div տարր, որը լողում է և օգնում է վերահսկել մեր տեղադրված տարրի դիրքը փաստաթղթում: Նկատի ունեցեք, որ լողացող div-ը տեղադրված է HTML կոդի մեր տեղադրված տարրից առաջ:

HTML:

CSS:

#ծնող (բարձրությունը՝ 250px;) #լողացող (լողացող՝ ձախ; բարձրությունը՝ 50%, լայնությունը՝ 100%, եզրագիծը՝ -50px;) #երեխա (պարզ՝ երկուսն էլ; բարձրությունը՝ 100px;)

Մենք փոխհատուցում ենք դատարկ div-ը դեպի ձախ կամ աջ և սահմանում ենք դրա բարձրությունը մինչև մայր տարրի 50%-ը: Այս կերպ այն կլցնի ծնողի վերին կեսը:

Քանի որ այս div-ը լողում է, այն հեռացվում է փաստաթղթի սովորական հոսքից, և մենք պետք է չեղարկենք տեքստի փաթեթավորումը տեղադրված տարրի համար: Օրինակը օգտագործում է հստակ՝ երկուսն էլ, բայց բավական է օգտագործել նույն ուղղությունը, ինչ լողացող դատարկ div տարրի փոխհատուցումը:

Ներդրված div տարրի վերին եզրագիծը գտնվում է դատարկ div տարրի ներքևի եզրագծից անմիջապես ներքև: Մենք պետք է տեղափոխենք տեղադրվող տարրը լողացող դատարկ տարրի բարձրության կեսով: Խնդիրը լուծելու համար օգտագործեք բացասական արժեք margin-bottom հատկության համար լողացող դատարկ div տարրի համար:

Այս մեթոդը գործում է նաև բոլոր բրաուզերներում: Այնուամենայնիվ, դրա օգտագործումը պահանջում է լրացուցիչ դատարկ div տարր և տեղավորված տարրի բարձրության իմացություն:

Եզրակացություն

Բոլոր նկարագրված մեթոդները հեշտ է օգտագործել: Դժվարությունն այն է, որ դրանցից ոչ մեկը հարմար չէ բոլոր դեպքերի համար։ Դուք պետք է վերլուծեք նախագիծը և ընտրեք այն մեկը, որը լավագույնս համապատասխանում է պահանջներին:

Շատ հաճախ խնդիրն այն է, որ բլոկը հարթեցվի էջի / էկրանի կենտրոնում և նույնիսկ այնպես, որ առանց java script-ի, առանց կոշտ չափերի կամ բացասական լուսանցքների սահմանման, այնպես, որ ոլորման տողերը աշխատեն ծնողի համար, եթե բլոկը գերազանցի իր չափը: . Համացանցում կան բազմաթիվ միապաղաղ օրինակներ, թե ինչպես կարելի է հարթեցնել բլոկը էկրանի կենտրոնին: Որպես կանոն, դրանց մեծ մասը հիմնված է նույն սկզբունքների վրա։

Ստորև ներկայացված են խնդրի լուծման հիմնական ուղիները, դրանց դրական և բացասական կողմերը: Օրինակների էությունը հասկանալու համար խորհուրդ եմ տալիս նվազեցնել Result պատուհանի բարձրությունը / լայնությունը նշված հղումների օրինակներում:

Տարբերակ 1. Բացասական նահանջ.

Դիրքորոշում արգելափակելվերևի և ձախ կողմի ատրիբուտները 50%-ով, և նախապես իմանալով բլոկի բարձրությունն ու լայնությունը, մենք սահմանում ենք բացասական լուսանցք, որը հավասար է չափի կեսին։ արգելափակել... Այս տարբերակի հսկայական թերությունն այն է, որ դուք պետք է հաշվարկեք բացասական մարժան: Նույն կերպ արգելափակելիրեն այնքան էլ ճիշտ չի պահում, երբ շրջապատված է ոլորման տողերով, այն պարզապես կտրված է, քանի որ այն ունի բացասական եզրեր:

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, դիրք՝ բացարձակ, վերև՝ 0, ձախ՝ 0, հորդառատ՝ ավտոմատ;) 50%; լուսանցք՝ -125px 0 0 -125px; img (առավելագույն լայնությունը՝ 100%, բարձրությունը՝ ավտոմատ; էկրան՝ արգելափակում; լուսանցք՝ 0 ավտոմատ; եզրագիծ՝ ոչ մեկը;))

Տարբերակ 2. Ավտոմատ ներքև:

Ավելի քիչ տարածված, բայց նման է առաջինին: Համար արգելափակելսահմանեք լայնությունը և բարձրությունը, դրեք վերևի աջ ներքևի ձախ ատրիբուտները 0-ի վրա և սահմանեք լուսանցքը ավտոմատ: Այս տարբերակի առավելությունը աշխատանքային ոլորման տողերն են ծնողեթե վերջինս ունի 100% լայնություն և բարձրություն։ Այս մեթոդի թերությունը կոշտ չափումն է:

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, դիրք՝ բացարձակ, վերև՝ 0, ձախ՝ 0, վարարում՝ ավտոմատ;) 0; ներքևում՝ 0; ձախում՝ 0; լուսանցք՝ ավտոմատ; img (առավելագույն լայնությունը՝ 100%, բարձրությունը՝ ավտոմատ; ցուցադրում՝ արգելափակում; լուսանցք՝ 0 ավտոմատ; եզրագիծը՝ ոչ մեկը;))

Տարբերակ 3. Աղյուսակ.

Հարցնում ենք ծնողսեղանի ոճերը, բջիջ ծնողտեքստի հավասարեցումը դրեք կենտրոնում: Ա արգելափակելսահմանել գծային բլոկի մոդելը: Դեմը, որը մենք ստանում ենք, չեն աշխատում ոլորման տողերը, և ընդհանրապես, ոչ աղյուսակի «էմուլյացիայի» էսթետիկան:

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, ցուցադրում՝ աղյուսակ, դիրք՝ բացարձակ, վերև՝ 0, ձախ՝ 0;> .ներքին (ցուցադրում՝ աղյուսակ-բջիջ; տեքստի հավասարեցում՝ կենտրոն; ուղղահայաց հավասարեցում՝ միջին; )) .block (ցուցադրել՝ inline-block; img (ցուցադրել՝ արգելափակել; եզրագիծ՝ ոչ մեկը;))

Այս օրինակին ոլորում ավելացնելու համար դուք պետք է ևս մեկ տարր ավելացնեք շինարարությանը:
Օրինակ՝ jsfiddle.net/serdidg/fk5nqh52/3:

Տարբերակ 4. Կեղծ տարր.

Այս տարբերակը զուրկ է նախորդ մեթոդներում թվարկված բոլոր խնդիրներից, ինչպես նաև լուծում է սկզբնապես առաջադրված խնդիրները։ Ներքեւի տողն այն է ծնողսահմանել ոճերը կեղծ տարրնախկինում, մասնավորապես, 100% բարձրություն, կենտրոնական հավասարեցում և ներկառուցված տուփի մոդել: Նույնն է արգելափակելգծային բլոկի մոդելը դրված է, կենտրոնական հավասարեցում: Դեպի արգելափակելտակը չի «ընկել». կեղծ տարրերբ առաջինի չափը ավելի մեծ է, քան ծնող, նշել ծնողսպիտակ բացատ՝ nowrap և տառաչափ՝ 0, որին հաջորդում է արգելափակելվերացնել այս ոճերը հետևյալով` սպիտակ բացատ. նորմալ: Այս օրինակում տառաչափի չափը՝ 0, անհրաժեշտ է, որպեսզի հեռացվի արդյունքում առաջացած տարածությունը ծնողև արգելափակելկոդի ֆորմատավորման հետ կապված։ Տարածքը կարելի է հեռացնել այլ կերպ, բայց լավագույնը պարզապես թույլ չտալն է:

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, դիրք՝ բացարձակ, վերև՝ 0, ձախ՝ 0, հորդառատ՝ ավտոմատ, սպիտակ բացատ՝ nowrap, տեքստի հավասարեցում՝ կենտրոն, տառատեսակի չափը՝ 0; &: առաջ ( բարձրություն՝ 100%; էկրան՝ ներկառուցված բլոկ; ուղղահայաց հավասարեցում՝ միջին; բովանդակություն՝ "";)) .բլոկ (ցուցադրում՝ ներկառուցված բլոկ; սպիտակ բացատ՝ նորմալ; ուղղահայաց հավասարեցում՝ միջին; տեքստի հավասարեցում՝ ձախից ; img (ցուցադրում՝ արգելափակում; եզրագիծ՝ ոչ մեկը;))

Կամ, եթե Ձեզ անհրաժեշտ է, որ ծնողը զբաղեցնի միայն պատուհանի բարձրությունն ու լայնությունը, և ոչ ամբողջ էջը.

Ծնող (դիրքը՝ ֆիքսված; վերև՝ 0; աջ՝ 0; ներքև՝ 0; ձախ՝ 0; հորդառատ՝ ավտոմատ; բացատ՝ nowrap; տեքստի հավասարեցում՝ կենտրոն; տառատեսակի չափը՝ 0; &: առաջ (բարձրությունը՝ 100%; էկրան՝ inline-block; ուղղահայաց հավասարեցում: միջին; բովանդակությունը: "";)) .block (ցուցադրում: inline-block; սպիտակ բացատ: նորմալ; ուղղահայաց հավասարեցում: միջին; տեքստի հավասարեցում: ձախ; img (ցուցադրում՝ արգելափակում; եզրագիծ՝ ոչ մեկը;))

Տարբերակ 5. Flexbox.

Ամենապարզ և էլեգանտ եղանակներից մեկը flexbox-ի օգտագործումն է: Նա չի պահանջում մարմնի անհարկի շարժումներ, բավականին հստակ նկարագրում է տեղի ունեցողի էությունը, ունի բարձր ճկունություն։ Միակ բանը, որ արժե հիշել այս մեթոդն ընտրելիս, IE աջակցությունն է 10-րդ տարբերակից ներառյալ: caniuse.com/#feat=flexbox

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, դիրք՝ ֆիքսված, վերև՝ 0, ձախ՝ 0, ցուցադրում՝ ճկունություն, հավասարեցում-տարրեր՝ կենտրոն, հարթեցում-բովանդակություն՝ կենտրոն, հիմնավորում-բովանդակություն՝ կենտրոն, հորդառատ՝ ավտոմատ; ) .block (ֆոն՝ # 60a839; img (ցուցադրում՝ արգելափակում; եզրագիծ՝ ոչ մեկը;))

Տարբերակ 6. Փոխակերպում.

Հարմար է, եթե մենք սահմանափակված ենք կառուցվածքով, և ծնող տարրը շահարկելու միջոց չկա, և բլոկը պետք է ինչ-որ կերպ հավասարեցվի: Translate () css ֆունկցիան գալիս է օգնության: 50%-ով բացարձակ դիրքավորումը կտեղավորի տուփի վերևի ձախ անկյունը հենց կենտրոնում, այնուհետև թարգմանության բացասական արժեքը կտեղափոխի տուփը իր չափսերի համեմատ: Իմացեք, որ բացասական ազդեցությունները կարող են հայտնվել մշուշոտ եզրերի կամ տառատեսակի ոճի տեսքով: Բացի այդ, այս մեթոդը կարող է հանգեցնել java-script-ի միջոցով բլոկի դիրքի հաշվարկման հետ կապված խնդիրների: Երբեմն, փոխհատուցելու լայնության 50%-ի կորուստը, որը մնացել է css հատկության օգտագործման պատճառով, բլոկի համար սահմանված կանոնը կարող է. օգնություն: margin-right: -50%;.

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, դիրք՝ ֆիքսված, վերև՝ 0, ձախ՝ 0, հորդառատ՝ ավտոմատ;) .բլոկ (դիրքը՝ բացարձակ; վերև՝ 50%, ձախ՝ 50%, փոխակերպում՝ թարգմանել -50%, -50%); img (ցուցադրում՝ արգելափակում;))

Տարբերակ 7. Կոճակ.

Օգտվողի azproduction տարբերակ որտեղ արգելափակելշրջանակված է կոճակի պիտակի մեջ: Կոճակն ունի իր ներսում ամեն ինչ կենտրոնացնելու հնարավորություն, մասնավորապես՝ inline և inline-block մոդելների տարրերը: Գործնականում խորհուրդ չեմ տալիս օգտագործել այն։

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, դիրք՝ բացարձակ, վերև՝ 0, ձախ՝ 0, հորդառատ՝ ավտոմատ, հետին պլան՝ ոչ մեկը, եզրագիծ՝ ոչ մեկը, ուրվագիծ՝ ոչ մեկը;) .block (ցուցադրում՝ inline-block; img (ցուցադրել՝ բլոկ ;; եզրագիծ՝ ոչ մեկը;))

Բոնուս

Օգտագործելով 4-րդ տարբերակի գաղափարը՝ կարելի է սահմաններ սահմանել արգելափակել, և վերջինս պատշաճ կերպով կցուցադրվի՝ շրջապատված ոլորման տողերով։
Օրինակ՝ jsfiddle.net/serdidg/nfqg9rza/2:

Կարող եք նաև հավասարեցնել նկարը կենտրոնում, իսկ եթե նկարն ավելի մեծ է ծնող, մասշտաբավորեք այն համապատասխանելու համար ծնող.
Օրինակ՝ jsfiddle.net/serdidg/nfqg9rza/3:
Օրինակ մեծ նկարով.

Եթե ​​դուք կտրեք որևէ կայք՝ հիմնված html-ի վրա, ապա կտեսնեք շերտ առ շերտ որոշակի կառուցվածք։ Ավելին, իր տեսքով այն նման կլինի շերտավոր խմորին։ Եթե ​​այդպես եք կարծում, ապա, ամենայն հավանականությամբ, երկար ժամանակ չեք կերել։ Այսպիսով, նախ կերակրեք ձեր քաղցը, այնուհետև մենք ձեզ ցույց կտանք, թե ինչպես կենտրոնացնել div շերտը ձեր կայքում:

Նշման առավելությունները

Կայքի կառուցվածքի կառուցման երկու հիմնական տեսակ կա.

• Աղյուսակային;
• Արգելափակված.

Սեղանի դասավորությունը գերիշխող է եղել ինտերնետի սկզբից: Դրա առավելությունները ներառում են տվյալ դիրքավորման ճշգրտությունը: Բայց, այնուամենայնիվ, այն ունի ակնհայտ թերություններ. Հիմնականը կոդի ծավալն է և ներբեռնման ցածր արագությունը։

Աղյուսակային դասավորություն օգտագործելիս վեբ էջը չի ցուցադրվի մինչև այն ամբողջությամբ բեռնված լինի: Մինչդեռ div բլոկներ օգտագործելիս տարրերն անմիջապես ցուցադրվում են։

Բացի բեռնման բարձր արագությունից, կայքի բլոկների վրա հիմնված կառուցումը թույլ է տալիս մի քանի անգամ նվազեցնել html կոդի քանակը։ Այդ թվում՝ CSS դասերի օգտագործման միջոցով:

Այնուամենայնիվ, աղյուսակային դասավորությունը պետք է օգտագործվի էջի վրա տվյալների ցուցադրման կառուցվածքի համար: Դրա օգտագործման դասական օրինակ է աղյուսակների ցուցադրումը:

Արգելափակել շենքը պիտակների վրա հիմնված