Կենտրոնների պատկերների, տեքստի եւ բլոկների տարրերի ստեղծման ժամանակ
Եթե դուք սովորում եք, թե ինչպես պետք է կառուցել կայքերը , ամենատարածված հնարքներից մեկը ձեզ հարկավոր է տիրապետել, թե ինչպես կենտրոնի տարրերը բրաուզերի պատուհանում: Սա կարող է նշանակել էջի վրա պատկերների կենտրոնացում, կամ դա կարող է լինել կենտրոնի հիմնավորող տեքստ, ինչպես վերնագրերը, որպես դիզայնի մաս:
Կենտրոնացված պատկերների կամ տեքստի այս տեսողական տեսք կատարելու պատշաճ ձեւը կամ նույնիսկ ձեր ամբողջ վեբ էջը Cascading Style Sheets- ի (CSS) օգտագործումը : Կենտրոնի հատկությունների մեծամասնությունը CSS- ում եղել են 1.0-ից, եւ նրանք աշխատում են CSS3- ի եւ ժամանակակից վեբ բրաուզերի հետ :
Վեբ դիզայնի բազմաթիվ ասպեկտների պես, CSS- ի օգտագործման տարբեր եղանակներ կան, որոնք կօգտագործվեն էլեկտրոնային տարրերի վրա: Եկեք տեսնենք տարբեր տեսակի ձեւեր, որոնք կօգնեն CSS օգտագործել այս տեսողական տեսք ունենալու համար:
CSS- ի կենտրոնի տարրերի CSS- ի օգտագործման ակնարկում
CSS- ի հետ կենտրոնացումը կարող է մարտահրավեր լինել վեբ դիզայներների համար, քանի որ այս տեսողական տեսք ունենալու համար շատ տարբեր եղանակներ կան: Չնայած մեթոդների բազմազանությունը կարող է լինել գեղեցիկ կամ փորձառու վեբ մշակողներ, ովքեր գիտեն, որ ոչ բոլոր տեխնիկաները աշխատելու են ամեն տարրի վրա, դա կարող է շատ վտանգավոր լինել նոր վեբ մասնագետների համար, քանի որ մեթոդների լայն տեսականի նշանակում է, որ նրանք պետք է իմանան, թե երբ է օգտագործելու այդ մոտեցումը: Լավագույն բանն այն է, որ մի քանի մոտեցումների մասին պատկերացում կազմեք: Երբ սկսում եք դրանք օգտագործել, դուք կսովորեք, թե որ եղանակը լավագույնն է, ինչ դեպքերում:
Բարձր մակարդակի վրա դուք կարող եք օգտագործել CSS- ը.
- Կենտրոնի տեքստը
- Կենտրոնը բլոկ-մակարդակի տարր (նման բաժին)
- Կենտրոնը պատկեր է
- Ուղղահայաց բլոկ կամ պատկեր է կենտրոնում
Շատ (շատ) տարի առաջ վեբ դիզայներները կարող էին օգտագործել կենտրոնի տարրերը կենտրոնի պատկերների եւ տեքստի համար, սակայն HTML տարրը այժմ հերքված է եւ այլեւս չսպառված է ժամանակակից վեբ բրաուզերում: Սա նշանակում է, որ դուք պետք է խուսափեք այս HTML տարրի օգտագործումը, եթե ցանկանում եք, որ ձեր էջերը պատշաճ կերպով ցուցադրվեն եւ համապատասխանեն ժամանակակից չափանիշներին: Այս տարրը պատճառաբանված է հիմնականում, քանի որ ժամանակակից կայքերը պետք է ունենան կառուցվածքի եւ ոճի հստակ բաժանման: HTML- ն օգտագործվում է կառուցվածքի ստեղծման համար, իսկ CSS- ն թելադրում է ոճը: Քանի որ կենտրոնացումը տարրերի տեսողական բնութագիրն է (այն, թե ինչպես է այն տեսնում, քան այն, ինչ է), այդ ոճը գործարկվում է ոչ թե HTML, այլ CSS- ով: Սա է պատճառը, որ HTML- ի կառույցին ավելացնելով <կենտրոն> պիտակը սխալ է, ըստ ժամանակակից վեբ ստանդարտների: Փոխարենը մենք կվերադառնանք CSS, որպեսզի մեր տարրերը լավ եւ կենտրոնացած լինեն:
Կենտրոնական տեքստը CSS- ով
Վեբ էջում կենտրոնանալու ամենահեշտ բանը տեքստն է: Կա միայն մեկ ոճային հատկություն, որը դուք պետք է իմանաք, դա անել `տեքստի հարթ: Ստորեւ բերեք CSS ոճը, օրինակ `
p.center {text-align: center; }
CSS- ի այս տողում, կենտրոնի դասի հետ գրված յուրաքանչյուր պարբերություն կենտրոնական հորիզոնական կդառնա իր ծնողի տարրի ներսում: Օրինակ, եթե պարբերությունը բաժանման մեջ էր, նշանակում է, որ այդ բաժնի երեխա էր, այն կենտրոնացած էր հորիզոնական
Ահա HTML- ի փաստաթղթում կիրառվող այս դասի օրինակ.
Այս տեքստը կենտրոնացված է:
Տեքստը կենտրոնացնելով text-align գույքի հետ, հիշեք, որ այն կենտրոնացած կլինի իր պարունակության տարրից եւ ոչ թե պարտադիր չէ կենտրոնանալ ամբողջ էջի մեջ: Նաեւ հիշեք, որ կենտրոնի հիմնավորված տեքստը դժվար է կարդալ բովանդակության խոշոր բլոկների համար, այնպես որ այս ոճն օգտագործեք խնայողաբար: Թերթի վերնագրերը եւ փոքր բլոկները, ինչպես օրինակ, հոդվածի կամ այլ բովանդակության համարի տեքստի տեքստը, հեշտ է կարդալ եւ տուգանել, երբ կենտրոնացած լինեն, բայց տեքստի ավելի մեծ բլոկները, ինչպես ամբողջ հոդվածը, դժվար կլիներ սպառում, եթե բովանդակությունը լիովին կենտրոնացած էր արդարացված: Հիշեք, որ ընթերցանությունը միշտ էլ կարեւոր է, երբ խոսքը վերաբերում է կայքի տեքստին:
CSS- ի հետ բովանդակության կենտրոնացման բլոկներ
Բլոկները ձեր էջում տեղադրված են ցանկացած տարրեր, որոնք ունեն սահմանված լայնություն եւ ստեղծվում են որպես բլոկ-մակարդակի տարր: Հաճախ այդ բլոկները ստեղծվում են HTML
div.center {
margin: 0 auto;
լայնությունը `80em;
}
Այս CSS տառատեսակը շերտային գույքի համար սահմանում է վերին եւ ստորին եզրագծերը 0 արժեքով, իսկ ձախ եւ աջը կօգտագործի «ավտո»: Սա, ըստ էության, տանում է ցանկացած տարածություն, որը մատչելի է եւ պատշաճ կերպով բաժանում է տեսադաշտի պատուհանի երկու կողմերի միջեւ, արդյունավետորեն կենտրոնացնել տարրը էջում:
Այստեղ կիրառվում է HTML- ում:
բայց ներսում տեքստը թողարկված է:
Քանի դեռ ձեր բլոկն ունի որոշակի լայնություն, այն կտեղակայվի պարունակող տարրի մեջ: Այդ բլոկում տեղադրված տեքստը չի կենտրոնանա դրա մեջ, բայց մնալու է արդարացված: Սա այն պատճառով, որ text- ը մնացել է հիմնավորված, կանխադրված ոստայնային բրաուզերում: Եթե ուզում եք, որ տեքստը կենտրոնացած լինի, կարող եք օգտագործել տեքստի հարթեցման հատկությունը, որը մենք ավելի շուտ լուսաբանեցինք այս մեթոդի հետ միասին բաժանելու համար:
Կենտրոնական պատկերներ CSS- ով
Թեեւ բրաուզերների մեծ մասը կցուցադրի պատկերներ, կենտրոնացված, օգտագործելով նույն տեքստային հարթության հատկությունը, որը մենք արդեն նայեցինք պարբերության համար, դա լավ գաղափար չէ հենվել այդ տեխնիկայի վրա, քանի որ խորհուրդ չի տրվում W3C- ի կողմից : Քանի որ խորհուրդ չի տրվում, միշտ կա հնարավորություն, որ բրաուզերների ապագա տարբերակները կարող են ընտրվել այս մեթոդը անտեսելու համար:
Պատկերը կենտրոնացնելու համար text-align- ի օգտագործման փոխարեն, դուք պետք է բացահայտորեն զննել զննարկիչին, որ պատկերը հանդիսանում է բլոկ-մակարդակի տարր: Այսպիսով, դուք կարող եք կենտրոնացնել այն, ինչպես ցանկացած այլ բլոկ: Ահա CSS- ը, դա տեղի է ունենում.
img.center {
ցուցադրում `բլոկ;
margin-left: auto;
margin-right: auto;
}
Եվ ահա HTML- ը, որ պատկերը, որը մենք կցանկանայինք կենտրոնանալ:
Դուք նաեւ կարող եք կենտրոնանալ օբյեկտների վրա `ներսից CSS- ով (տես ներքեւում), սակայն այս մոտեցումը խորհուրդ չի տրվում, քանի որ այն HTML տեսողական տեսք է հաղորդում տեսողական ոճերը: Հիշեք, մենք ցանկանում ենք առանձնացնել ոճը եւ կառուցվածքը, այնպես որ CSS- ի ոճերը ավելացնելով ձեր HTML կոդը կոտրելիս, բաժանումը եւ, որպես այդպիսիք, այն պետք է խուսափել հնարավորության սահմաններում:
Կենտրոնական տարրեր ուղղահայաց CSS- ով
Կենտրոնական օբյեկտները ուղղահայացորեն միշտ վեբ դիզայնի մեջ դժվար է եղել, բայց CSS3- ի CSS- ի ճկուն տուփի դասավորության մոդուլի թողարկմամբ, այժմ այն կարող է անել:
Ուղղահայաց հավասարեցումը նման է նաեւ վերը նշված հորիզոնական հավասարեցմանը: CSS- ի գույքն ուղղահայաց է, միջին արժեքով:
.vcenter {
ուղղահայաց - հավասարաչափ: միջին;
}
Այս մոտեցման բացասական կողմն այն է, որ ոչ բոլոր բրաուզերները սատարում են CSS FlexBox- ին, թեեւ ավելի ու ավելի շատ են գալիս այս նոր CSS դասավորության մեթոդը: Փաստորեն, բոլոր ժամանակակից բրաուզերները այսօր սատարում են այս CSS ոճը: Սա նշանակում է, որ ձեր միակ մտահոգությունը Flexbox- ի հետ շատ ավելի մեծ բրաուզերի տարբերակ կլինի:
Եթե ունեք ավելի հին բրաուզերների հետ կապված հարցեր, W3C- ը խորհուրդ է տալիս ուղղել ուղղահայաց տեքստը կոնտեյներով `օգտագործելով հետեւյալ մեթոդը.
- Տեղադրեք տարրերը, կենտրոնանալով պարունակող տարրի մեջ, ինչպես օրինակ div:
- Սահմանեք պարունակող տարրի նվազագույն բարձրությունը:
- Հայտարարեք, որ պարունակող տարրը որպես սեղանի բջիջ:
- Ստեղծեք ուղղահայաց հավասարումը «միջին»:
Օրինակ, այստեղ CSS- ն է.
.vcenter {
min-height: 12em;
ցուցադրում `սեղանի բջիջ;
ուղղահայաց - հավասարաչափ: միջին;
}
Եվ ահա HTML- ը.
Այս տեքստը ուղղահայաց կենտրոնացված է վանդակում:
Ուղղահայաց կենտրոնացումը եւ Internet Explorer- ի ավելի հին տարբերակները
Internet Explorer- ի (IE) կենտրոնը ստիպելու համար կան որոշ ձեւեր, կենտրոնացնելով պայմանական մեկնաբանությունները, այնպես որ միայն IE- ն տեսնում է ոճերը, բայց դրանք մի քիչ բարդ եւ տգեղ են: Լավ նորությունն այն է, որ Microsoft- ի վերջին տարբերակների համար IE- ի հին տարբերակների օժանդակությունը դադարեցնելու որոշում կայացնելիս, նրանք չպետք է աջակցեն բրաուզերներին, շուտով դուրս գալով դրանցից, դարձնելով հեշտ դյուրին դիզայներների համար օգտագործել CSS- ի FlexBox- ը, որը կդարձնի CSS- ի բոլոր դասավորությունը, ոչ միայն կենտրոնացնելով, ավելի հեշտ է բոլոր վեբ դիզայներների համար: