≡×ՄԵՆՈՒ

• Windows 10
• Ինտերնետ, WiFi
• Օգտակար
• Windows 7
• Սխալներ

Html կենտրոնացած: Div-ի կենտրոնացում և դիրքավորման այլ նրբություններ: Բլոկը մայր բլոկի ներսում ուղղահայաց հարթեցնելու համար

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

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

Տարբերակ 1. Բացասական լիցք:

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

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

Տարբերակ 2. Ավտոմատ նահանջ:

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

Ծնող (լայնություն՝ 100%, բարձրություն՝ 100%, դիրք՝ բացարձակ, վերև՝ 0, ձախ՝ 0, հորդառատ՝ ավտոմատ; ) .բլոկ ( լայնություն՝ 250 պքս, բարձրություն՝ 250 պքս, դիրք՝ բացարձակ, վերև՝ 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, որից հետո y արգելափակելչեղարկել այս ոճերը հետևյալով` սպիտակ բացատ. նորմալ: Այս օրինակում տառաչափի չափը՝ 0, անհրաժեշտ է, որպեսզի հեռացվի արդյունքում առաջացած տարածությունը ծնողԵվ արգելափակելկոդի ձևաչափման հետ կապված. Բացը կարելի է հեռացնել այլ եղանակներով, բայց լավագույնն է համարվում պարզապես թույլ չտալը:

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

Կամ, եթե ցանկանում եք, որ ծնողը վերցնի միայն պատուհանի բարձրությունն ու լայնությունը, ոչ թե ամբողջ էջը.

Ծնող (դիրք՝ ֆիքսված; վերև՝ 0; աջ՝ 0; ներքև՝ 0; ձախ՝ 0; հորդառատ՝ ավտոմատ; բացատ՝ nowrap; տեքստի հավասարեցում՝ կենտրոն; տառատեսակի չափը՝ 0; &: առաջ (բարձրությունը՝ 100%; ցուցադրում` ներկառուցված բլոկ; ուղղահայաց հավասարեցում` միջին; բովանդակություն` ""; ) ) .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-ի միջոցով բլոկի դիրքի հաշվարկման հետ կապված խնդիրների: Երբեմն, ձախ css հատկության օգտագործման պատճառով լայնության 50%-ի կորուստը փոխհատուցելու համար, սահմանված է կանոն. բլոկը կարող է օգնել. margin-right: -50%; .

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

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

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

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

Բոնուս

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

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

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

Եթե ​​սովորաբար տեքստի հորիզոնական հավասարեցման հետ կապված խնդիրներ չկան (մենք օգտագործում ենք text-align:center հատկությունը, և ամեն ինչ լավ կլինի), ապա ուղղահայաց հավասարեցման դեպքում ամեն ինչ մի փոքր ավելի բարդ է:

CSS-ում կա մեկ հատկություն, որը կոչվում է vertical-align: Թվում է, թե դրա օգտագործումը կարող է լուծել բոլոր խնդիրները: Բայց դա չկար։

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

Բլոկի տարրերի դեպքում ուղղահայաց հավասարեցման հատկությունը չի գործում:

Այս իրավիճակից դուրս գալու երկու ճանապարհ կա.

Նրանց համար, ովքեր նախընտրում են ամեն ինչ դիտել տեսանյութով.

Նրանց համար, ովքեր սիրում են տեքստը, կարդացեք ստորև այս խնդրի լուծման համար:

Մեթոդ Ա.Որպես լուծում, դուք կարող եք տեքստը տեղադրել ոչ թե div տարրում, այլ աղյուսակի բջիջում:

Տող 1 Տող 2 Տող 3

Մեթոդ Բ.Օգտագործել հատկությունների ցուցադրում:աղյուսակ-բջիջ;

Մի խնդիր՝ այս հատկությունը չի աջակցվում Internet Explorer 6-7 տարբերակ.

Իրավիճակ 1.Տեքստի մեկ տողի հավասարեցում:

Դիտարկենք մի պարզ օրինակ.

Տեքստի տողը վերևում է: Որովհետեւ մենք ունենք միայն մեկ տող տեքստ, այնուհետև հավասարեցման համար կարող եք առավելագույնը օգտագործել պարզ ձևովՍա նշանակում է տողերի բարձրության հատկություն ավելացնելով, որի արժեքը հավասար է div-ի բարձրությանը, որում գտնվում է տեքստը:

Այս մեթոդը լավ է աշխատում, երբ դուք ունեք միայն մեկ տող տեքստ:

Իրավիճակ 2.Եթե ​​հայտնի են մանկական բլոկի լայնության և բարձրության ճշգրիտ արժեքները, որտեղ գտնվում է հենց տեքստը:

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

Իմանալով բլոկի լայնությունն ու բարձրությունը՝ կարող եք վերցնել այս արժեքի կեսը և սահմանել այն բացասական արժեքների՝ լուսանցքի ձախ և լուսանցքի վերևի հատկությունների համար:

Եթե ​​հին բրաուզերների համար աջակցության կարիք չունեք, այս տարբերակը կլինի լավագույնը:

Ինչպես տեսնում եք, պարզվեց, որ գործնականում այնքան էլ հեշտ չէ տեքստը կենտրոնացնելը:

Հորիզոնական հավասարեցում բովանդակությունը, որն ունի float հատկություն, կարելի է անել շատ հեշտությամբ և նաև ամբողջովին խաչաձեւ զննարկիչ է (աշխատում է Opera 8+, Firefox 3+, IE 5.5+):

div բլոկի հավասարեցման օրինակ

Լողացող տուփը կամ մի քանի դարսված տուփերը հավասարեցնելու համար անհրաժեշտ է մեկ այլ արտաքին տուփ: Արտաքին տուփին և ներքին արկղերին հատկացվում է դիրք՝ բացարձակ; և լողալ՝ ձախ; , արտաքին հանձնարարությունը ձախ՝ 50%; , իսկ ներքին բլոկների համար՝ աջ՝ 50%; . Բոց օգտագործելու համար՝ աջ; դուք պետք է նշանակեք արտաքին նշանակման իրավունք՝ 50%; , իսկ ներքին բլոկները մնացել են՝ 50%; . Ես խորհուրդ եմ տալիս մաքրել բոցը՝ տեղադրելով բլոկ, որի հատկությունը պարզ է՝ երկուսն էլ, կենտրոնական դասավորված տարրերից հետո; .

Այս կերպ դուք կարող եք հասնել հետևյալ կենտրոնացմանը.

Ներքին բլոկը id = block-inner-ով ունի կանաչ եզրագիծ, արտաքին բլոկը id = block ունի կետավոր կարմիր եզրագիծ:

#block ( դիրքը՝ հարաբերական; լողացող՝ ձախ; ձախ՝ 50%, եզրագիծ՝ 1px գծիկ #a00; ) #block-inner ( դիրքը՝ հարաբերական; բոց՝ ձախ; աջ՝ 50%, եզրագիծ՝ 2px ամուր #0a0; լիցք : 10px; ) #էջ (հորդառատ՝ թաքնված; )

Ցանկի տարրերի հավասարեցման օրինակ

Գործնականում վերը նշված օրինակը կարող է կիրառվել, երբ կայքի ընտրացանկը հորիզոնական հավասարեցված է: Այնուամենայնիվ, պետք է հաշվի առնել, որ բավականաչափ մեծ թվով տարրերով (զբաղեցնելով էջի լայնության կեսից ավելին), հայտնվում է հորիզոնական ոլորում։ Դրանից ազատվելու համար դուք պետք է կիրառեք արտահոսքի հատկությունը արտաքին բլոկում: Եթե ​​ընտրացանկը բացվող է, ապա դրա բացվող տարրերը կարող են անջատվել այս արտաքին բլոկով: Այս խնդրից խուսափելու համար դուք պետք է կիրառեք «հորդառատ» հատկությունը մի տուփի վրա, որը հնարավորինս փակ է, օրինակ՝ ամենահեռավոր տուփը, որը պարուրում է էջի ամբողջ բովանդակությունը:

Օրինակ, դուք կարող եք հավասարեցնել ընտրացանկը հետևյալ կերպ.

ul ցուցակի li տարրերն ունեն կանաչ եզրագիծ, իսկ ul ցուցակը՝ գծավոր կարմիր եզրագիծ:

Ստորև բերված օրինակի HTML կոդը այսպիսի տեսք ունի.

Ստորև բերված օրինակի CSS կոդը հետևյալն է.

#menu ( դիրքը՝ հարաբերական; լողացող՝ ձախ; ձախ՝ 50%, եզրագիծ՝ 1px գծիկ #a00; ցուցակի ոճ՝ ոչ մեկը; լուսանցք՝ 0; լիցք՝ 0; ) #menu li ( դիրքը՝ հարաբերական; բոց՝ ձախ; աջ՝ 50%; եզրագիծ՝ 2px կոշտ #0a0; լիցք՝ 10px; ) #էջ (հորդառատ՝ թաքնված; )

Այսպիսով, դա բավականին պարզ է: Մաղթում եմ ձեզ հաջողություն նոր մեթոդների յուրացման գործում։

Կարծում եմ, ձեզնից շատերը, ովքեր կատարել են դասավորության աշխատանք, հանդիպել են տարրերը ուղղահայաց հավասարեցնելու անհրաժեշտությանը և գիտեն, թե ինչ դժվարություններ են առաջանում տարրը կենտրոնին հավասարեցնելիս:

Այո, CSS-ում ուղղահայաց հավասարեցման համար կա հատուկ ուղղահայաց հավասարեցման հատկություն՝ բազմաթիվ արժեքներով: Այնուամենայնիվ, գործնականում դա չի աշխատում այնպես, ինչպես սպասվում էր: Փորձենք դա պարզել:

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

• սեղաններ,
• անցք,
• գծի բարձրություն,
• ձգում,
• բացասական մարժա,
• փոխակերպում,
• կեղծ տարր
• flexbox.

Որպես օրինակ, դիտարկենք հետևյալ օրինակը։

Կան երկու div տարրեր, որոնցից մեկը գտնվում է մյուսի մեջ: Եկեք նրանց տանք համապատասխան դասեր՝ արտաքին և ներքին:

Նպատակը ներքին տարրը արտաքին տարրի կենտրոնին հավասարեցնելն է:

Սկսելու համար հաշվի առեք այն դեպքը, երբ արտաքին և ներքին բլոկի չափերը հայտնի. Ավելացնենք կանոնների ցուցադրումը` inline-block ներքին տարրին, և text-align` կենտրոն և ուղղահայաց հավասարեցում` միջինից դեպի արտաքին տարր:

Հիշեք, որ հավասարեցումը վերաբերում է միայն այն տարրերին, որոնք ունեն ներդիր կամ ներկառուցված բլոկ ցուցադրման ռեժիմ:

Եկեք սահմանենք բլոկների չափերը, ինչպես նաև ֆոնի գույները՝ դրանց եզրագծերը տեսնելու համար:

Արտաքին ( լայնությունը՝ 200px; բարձրությունը՝ 200px; տեքստի հավասարեցումը՝ կենտրոն; ուղղահայաց հավասարեցումը՝ միջին; ֆոնի գույնը՝ #ffc; ) .ներքին (ցուցադրում՝ inline-block; լայնությունը՝ 100px; բարձրությունը՝ 100px; ֆոնի գույնը : #fcc;)
Ոճերը կիրառելուց հետո մենք կտեսնենք, որ ներքին բլոկը հավասարեցված է հորիզոնական, բայց ոչ ուղղահայաց.
http://jsfiddle.net/c1bgfffq/

Ինչու՞ դա տեղի ունեցավ:Փաստն այն է, որ ուղղահայաց հավասարեցման հատկությունը ազդում է հավասարեցման վրա տարրը ինքնին, ոչ թե դրա բովանդակությունը(բացառությամբ այն դեպքերի, երբ այն կիրառվում է աղյուսակի բջիջների վրա): Հետևաբար, արտաքին տարրի վրա այս հատկությունը կիրառելը ոչինչ չտվեց: Ավելին, այս հատկությունը ներքին տարրի վրա կիրառելը նույնպես ոչինչ չի տա, քանի որ inline-բլոկները ուղղահայաց են հավասարեցված հարևան բլոկների հետ, և մեր դեպքում մենք ունենք մեկ inline-block:

Այս խնդիրը լուծելու մի քանի տեխնիկա կա. Եկեք մանրամասնորեն նայենք դրանցից յուրաքանչյուրին ստորև:

Հարթեցում սեղանի հետ

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

http://jsfiddle.net/c1bgfffq/1/

Ակնհայտ մինուս այս որոշումը- իմաստաբանության տեսանկյունից սխալ է աղյուսակներ օգտագործելը հավասարեցման համար: Երկրորդ թերությունն այն է, որ աղյուսակ ստեղծելու համար անհրաժեշտ է ևս մեկ տարր ավելացնել արտաքին բլոկի շուրջ:

Առաջին մինուսը կարելի է մասամբ հեռացնել՝ աղյուսակը և td պիտակները փոխարինելով div-ով և CSS-ում աղյուսակի ցուցադրման ռեժիմը դնելով։

.արտաքին փաթաթան (ցուցադրում՝ աղյուսակ; ) .արտաքին (ցուցադրում՝ սեղանի բջիջ; )
Այնուամենայնիվ, արտաքին բլոկը դեռևս կմնա սեղան՝ դրանից բխող բոլոր հետևանքներով։

Հարթեցում լցոնման հետ

Եթե ​​հայտնի են ներքին և արտաքին բլոկի բարձրությունները, ապա հավասարեցումը կարող է սահմանվել՝ օգտագործելով ներքին բլոկի ուղղահայաց ծածկը՝ օգտագործելով բանաձևը՝ (H արտաքին - H ներքին) / 2:

Արտաքին (բարձրությունը՝ 200px;) .ներքին (բարձրությունը՝ 100px; լուսանցք՝ 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Լուծման թերությունն այն է, որ այն կիրառելի է միայն սահմանափակ թվով դեպքերում, երբ հայտնի են երկու բլոկների բարձրությունները։

Հավասարեցում գծի բարձրության հետ

Եթե ​​գիտեք, որ ներքին բլոկը պետք է զբաղեցնի ոչ ավելի, քան մեկ տող տեքստ, ապա կարող եք օգտագործել line-height հատկությունը և այն հավասարեցնել արտաքին բլոկի բարձրությանը: Քանի որ ներքին բլոկի բովանդակությունը չպետք է փաթաթվի երկրորդ տողին, խորհուրդ է տրվում ավելացնել սպիտակ բացատ՝ nowrap և overflow՝ նաև թաքնված կանոններ:

Արտաքին (բարձրությունը՝ 200px; գծի բարձրությունը՝ 200px;)
http://jsfiddle.net/c1bgfffq/12/

Այս տեխնիկան կարող է օգտագործվել նաև բազմագիծ տեքստը հավասարեցնելու համար, եթե դուք անտեսում եք տողի բարձրության արժեքը ներքին բլոկի համար և ավելացնում եք կանոնների ցուցադրումը. inline-block և vertical-align:

Արտաքին (բարձրությունը՝ 200px; գծի բարձրությունը՝ 200px;)
http://jsfiddle.net/c1bgfffq/15/

Այս մեթոդի թերությունն այն է, որ արտաքին բլոկի բարձրությունը պետք է հայտնի լինի:

Ձգվող հավասարեցում

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

Դրա համար անհրաժեշտ է.

1. սահմանել հարաբերական դիրքը արտաքին բլոկին, իսկ բացարձակ դիրքը ներքին բլոկին.
2. ավելացրեք կանոնները վերևից՝ 0 և ներքև՝ 0 ներքին բլոկին, որի արդյունքում այն ​​կձգվի մինչև արտաքին բլոկի ողջ բարձրությունը.
3. Ներքին բլոկի ուղղահայաց ծածկույթի համար արժեքը սահմանեք ավտոմատ:

.արտաքին ( դիրքը՝ հարաբերական; ) .ներքին (բարձրությունը՝ 100px; դիրքը՝ բացարձակ; վերև՝ 0; ներքևում՝ 0; լուսանցք՝ ավտոմատ 0; )
http://jsfiddle.net/c1bgfffq/4/

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

Հավասարեցում բացասական լուսանցքի վերևի հետ

Այս մեթոդը լայնորեն հայտնի է դարձել և շատ հաճախ է կիրառվում։ Ինչպես նախորդը, այն կիրառվում է, երբ արտաքին բլոկի բարձրությունն անհայտ է, բայց ներքինի բարձրությունը հայտնի է։

Դուք պետք է դրեք արտաքին բլոկը հարաբերական դիրքի, իսկ ներքին բլոկը՝ բացարձակ դիրքավորման: Այնուհետև դուք պետք է տեղափոխեք ներսի տուփը արտաքին տուփի վերևի բարձրության կեսից ներքև՝ 50% և տեղափոխեք այն իր սեփական բարձրության վերևի կիսով չափ՝ -H ներքին / 2:

Արտաքին (դիրքը՝ հարաբերական; ) .ներքին (բարձրությունը՝ 100px; դիրքը՝ բացարձակ; վերև՝ 50%; լուսանցք՝ վերև՝ -50px; )
http://jsfiddle.net/c1bgfffq/13/

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

Հարթեցում փոխակերպման հետ

Այս մեթոդը նման է նախորդին, բայց այն կարող է կիրառվել, երբ ներքին բլոկի բարձրությունը անհայտ է: Այս դեպքում, պիքսելներում բացասական լիցք դնելու փոխարեն, կարող եք օգտագործել փոխակերպման հատկությունը և վեր բարձրացնել ներքին տուփը translateY ֆունկցիայով և -50% արժեքով:

Արտաքին ( դիրքը՝ հարաբերական; ) .ներքին ( դիրքը՝ բացարձակ; վերև՝ 50%; փոխակերպում՝ translateY (-50%); )
http://jsfiddle.net/c1bgfffq/9/

Ինչու՞ նախորդ մեթոդով անհնար էր արժեքը սահմանել որպես տոկոս: Քանի որ լուսանցքի հատկության տոկոսային արժեքները հարաբերական են մայր տարրին, 50% արժեքը հավասար է արտաքին տուփի բարձրության կեսին, և մենք պետք է ներքին տուփը կիսով չափ բարձրացնենք սեփական բարձրության վրա: Հենց դրա համար է վերափոխման հատկությունը:

Այս մեթոդի թերությունն այն է, որ այն չի կարող կիրառվել, եթե ներքին բլոկը բացարձակ դիրքավորում ունի:

Հարթեցում Flexbox-ի հետ

Ուղղահայաց հավասարեցման ամենաժամանակակից միջոցը ճկուն տուփի դասավորության օգտագործումն է (հանրաճանաչորեն հայտնի է որպես Flexbox): Այս մոդուլը թույլ է տալիս ճկուն կերպով վերահսկել տարրերի դիրքավորումը էջում՝ տեղադրելով դրանք գրեթե ցանկացած վայրում: Flexbox-ի կենտրոնում հավասարեցումը շատ պարզ խնդիր է:

Արտաքին բլոկը պետք է դրվի ցուցադրելու համար՝ flex , իսկ ներքին բլոկը պետք է սահմանվի լուսանցքի վրա՝ auto : Եվ դա բոլորը! Գեղեցիկ, այնպես չէ՞:

Արտաքին ( էկրան՝ ճկուն; լայնություն՝ 200px; բարձրություն՝ 200px; ) .ներքին ( լայնությունը՝ 100px; լուսանցք՝ ավտոմատ; )
http://jsfiddle.net/c1bgfffq/14/

Այս մեթոդի թերությունն այն է, որ Flexbox-ը աջակցվում է միայն ժամանակակից բրաուզերների կողմից:

Ո՞ր ճանապարհն ընտրել:

Խնդրի դրույթից անհրաժեշտ է ելնել.

• Տեքստի ուղղահայաց հավասարեցման համար ավելի լավ է օգտագործել ուղղահայաց ներդիր կամ տող-բարձրություն հատկություն:
• Հայտնի բարձրություն ունեցող բացարձակ դիրքավորված տարրերի համար (օրինակ՝ պատկերակները) իդեալական է բացասական լուսանցքային մոտեցումը:
• Ավելի բարդ դեպքերի համար, երբ բլոկի բարձրությունը անհայտ է, պետք է օգտագործվի կեղծ տարրը կամ փոխակերպման հատկությունը:
• Դե, եթե դուք բավականաչափ բախտավոր եք և կարիք չունեք աջակցելու IE-ի հին տարբերակներին, ապա, իհարկե, Flexbox-ը ավելի լավն է:

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

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

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

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

Մարդկանց մեծամասնությունը, երբ օգտագործում է 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 հատկությունը տեղադրված կոնտեյների համար:

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

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

Օրինակի կոդը միաժամանակ կատարում է ինչպես հորիզոնական, այնպես էլ ուղղահայաց կենտրոնացում.

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 տարր և տեղավորված տարրի բարձրության իմացություն:

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

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