Նկարագրություն

Հավասարեցնում է տեքստի բլոկը եզրին:

Այս հատկանիշի փոխարեն պետք է օգտագործվեն ոճեր

Շարահյուսություն

Արժեքներ

Կանխադրված արժեք

Օրինակ. Տեքստի հավասարեցում

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au tegue feugii duisdola. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat: Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat:

Բրաուզերներ՝ Desktop Mobile ?

✖

Բրաուզերներ

Բրաուզերի աղյուսակում օգտագործվում են հետևյալ նշումները.

• - տարրը լիովին աջակցվում է բրաուզերի կողմից.
• - տարրը չի ընկալվում բրաուզերի կողմից և անտեսվում է.
• - շահագործման ընթացքում կարող են հայտնվել տարբեր սխալներ, կամ տարրը ապահովված է վերապահումներով:

Համարը ցույց է տալիս դիտարկիչի տարբերակը, որից աջակցվում է տարրը:

Պատկերների համար ստանդարտները չեն սահմանում լռելյայն հավասարեցում տեքստի և միևնույն տողում գտնվող այլ պատկերների նկատմամբ. միշտ չէ, որ հնարավոր է կանխատեսել, թե ինչպիսի տեսք կունենան այս բաղադրիչները:1 HTML փաստաթղթերում պատկերները սովորաբար տեղադրվում են «գծի մեջ»: միայն մեկ տողով տեքստով։ Ինչպես ընդունված է տպագիր մամուլում, տեքստը «փաթաթում» է դրանք, այնպես որ պատկերին կից կարող են լինել մի քանի տող, և ոչ միայն մեկը։

Բարեբախտաբար, փաստաթղթեր ստեղծողները որոշակիորեն վերահսկում են, թե ինչպես են պատկերները համընկնում շրջակա տեքստի հետ՝ օգտագործելով պիտակի հավասարեցման հատկանիշը: . HTML և XHTML ստանդարտները սահմանում են հավասարեցման հատկանիշի հինգ արժեք՝ ձախ, աջ, վերև, միջին, ներքև: Ձախ և աջ արժեքները հանգեցնում են նրան, որ տեքստը փաթաթվում է պատկերի շուրջ՝ շրջելով համապատասխան եզրին: Մնացած երեքը պատկերը հավասարեցնում են ուղղահայաց՝ շրջակա տեքստի նկատմամբ:

Բոլոր հայտնի բրաուզերները, ներառյալ Opera, Firefox, Netscape-ը և Internet Explorer-ը, համաձայն են, որ align=bottom հատկանիշը լռելյայն ուղղահայաց հավասարեցումն է, և միատեսակ տեղադրում են պատկերները ամենավերևի նիշի վերևում՝ տեքստի տողում, տես Նկար 1: 15.11.

Միևնույն ժամանակ, բրաուզերները համաձայն չեն, թե ինչպես տեղադրել պատկերները align=middle հատկանիշով տեքստի համեմատ: Նկ. Նկար 5.11-ը ցույց է տալիս, որ Netscape-ը և Opera-ն պատկերը տեղադրում են տեքստի կենտրոնական գծի հիման վրա: Ինչ վերաբերում է Internet Explorer բրաուզերներին

Բրինձ. 5.11. Ներկառուցված պատկերների ստանդարտ հավասարեցում

Բրինձ. 5.12. Internet Explorer-ը և Firefox-ը հավասարեցնում են պատկերի կենտրոնական գիծը ամենաբարձր տարրի կենտրոնական գծի հետ, այլ ոչ թե տեքստի կենտրոնական գծի:

և Firefox-ը, նրանք պատկերը տեղադրում են ամենաբարձր տարրի կենտրոնական գծի երկայնքով, որը պարտադիր տեքստ չէ (Նկար 5.12):

Բացի այդ, բրաուզերներն այս կամ այն ​​չափով աջակցում են ուղղահայաց պատկերի հավասարեցման հինգ լրացուցիչ հնարավորություններ՝ texttop, center, absmiddle, baseline և absbottom (նրանք, ովքեր չեն կռահել դրանց նշանակությունը, բարձրացրեք ձեր ձեռքը):

align=texttop արտահայտությունը զննարկիչին հրահանգում է հավասարեցնել պատկերի վերին եզրը ընթացիկ տողի ամենաբարձր տեքստային տարրի վերին եզրին: Հակառակ դեպքում, վերևը այն արժեքն է, որը հավասարեցնում է պատկերի վերին եզրը ամենաբարձր տարրի, տեքստային բաղադրիչի կամ պատկերի վերին եզրին ընթացիկ տողում: Եթե ​​տողը չի պարունակում տեքստի վերևից դուրս ցցված այլ պատկերներ, տեքստի վերևն ու վերևը նույն ազդեցությունն են ունենում: Opera-ն չի աջակցում texttop-ին, սակայն այլ հայտնի բրաուզերներ այն մեկնաբանում են խստորեն համաձայն այս նկարագրության:

Առաջին անգամ ներկայացվել է Internet Explorer-ում և Netscape-ում, արժեքի կենտրոնը մեկնաբանվում է այնպես, ինչպես միջինը Internet Explorer-ում, Netscape-ում և Firefox-ում: Պարզապես չմոռանանք, որ նրանցից յուրաքանչյուրն յուրովի է հասկանում միջինի իմաստը։ Opera-ն անտեսում է align=center արտահայտությունը:

Եթե ​​դուք սահմանել եք պիտակի հավասարեցման հատկանիշը absmiddle արժեքը, զննարկիչը կսահմանի պատկերի բացարձակ միջինը ընթացիկ գծի բացարձակ կեսին: Դա այդպես չէ միջին և կենտրոնական արժեքների դեպքում, որոնք պատկերի միջնամասը հավասարեցնում են տեքստի ընթացիկ տողի հիմնական գծին: Թեև Netscape-ը և Opera-ն չեն տարբերում absmiddle-ն ու միջինը, Firefox-ը և Internet Explorer-ն օգտագործում են այս արժեքները՝ ընտրովի կերպով պատկերները հավասարեցնելու միջին գծերի երկայնքով: Այլ կերպ ասած, Firefox-ը և Internet Explorer-ը վերաբերվում են absmiddle-ին այնպես, ինչպես Netscape-ը վերաբերվում է միջինին:

Բրինձ. 5.13. Պատկերները alingn=absbottom հատկանիշի հետ հավասարեցնելիս զննարկիչները հաշվի են առնում հայտերը

ներքևի և բազային (կանխադրված)

Ներքևի և ելակետային արժեքներն ունեն նույն ազդեցությունը, կարծես դուք ընդհանրապես չեք ներառել հավասարեցման հատկանիշը: Զննարկիչը պատկերի ներքևի եզրը հավասարեցնում է տեքստի բազային: Սա չպետք է շփոթել absbottom արժեքի էֆեկտի հետ, որը նաև հաշվի է առնում տառերի այն հատվածները, որոնք իջնում ​​են բազային գծից:1 (Եթե դեռևս ձեռքդ բարձրացված է, կարող ես իջեցնել այն):

align=absbottom արտահայտությունը զննարկիչին հուշում է պատկերի ներքևի եզրին համապատասխանեցնել ընթացիկ տողի տեքստի իրական ստորին եզրին: Ճշմարիտ ներքևը տեքստի ամենացածր կետն է, ներառյալ ցանկացած իջնող (օրինակ, «y»-ի ներքևի հատվածը), նույնիսկ եթե տողում չկա: Ելակետային գիծն անցնում է «v» նշանի ստորին եզրով: Opera-ն՝ ստանդարտ կրողը, անտեսում է absbottom արժեքը, իսկ մյուս հայտնի բրաուզերները վերաբերվում են դրան, ինչպես նկարագրված է (Նկար 5.13):

Օգտագործեք վերևից և միջինից՝ պատկերակները, ցանկի պարբերակները և այլ հատուկ պատկերները հարակից տեքստի հետ համատեղելու համար: Այլ դեպքերում align=bottom (լռելյայն ընտրված) ավելի լավ տեսք է ստանում: Մեկ կամ մի քանի պատկեր անընդմեջ հավասարեցնելիս ընտրեք հատկանիշի արժեքը, որը ձեզ կտա ձեր փաստաթղթի լավագույն տեսքը:

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

Տարրերի հավասարեցումը մի բան է, որը դուք պարզապես պետք է իմանաք դա անելիս: Առաջին բանը, որ դուք պետք է անեք, մուտքագրեք պարզ էջ:

Ժամանակին մի պիտակ կար

Ես ձեզ խորհուրդ չեմ տալիս օգտագործել այն հիմա, ավելի ժամանակակից մեթոդների առկայության պատճառով, բայց չեմ կարող չնշել դա: Այն շատ, շատ պարզ է օգտագործման համար: Այն ամենը, ինչ դուք պետք է կենտրոնացնեք, տեղադրեք այս պիտակի ներսում: Օրինակ, այստեղ մենք հավասարեցնում ենք 1-ին մակարդակը դեպի կենտրոն:

Կարող եք նկար ավելացնել՝ նաև կենտրոնացված, եկեք նաև անցնենք հաջորդ տողին՝ օգտագործելով պիտակը
:

1-ին մակարդակի վերնագիր, կենտրոնում հավասարեցված

Դա պիտակ էր

, որն արդեն հնացել է, ի լրումն, հակառակ թեգերի ձեր ակնկալիքներին Եվ պարզապես գոյություն չունի: Ենթադրենք լռելյայնորեն հավասարեցված ձախից, պիտակի միջոցով՝ կենտրոնում հավասարեցված , բայց ինչ վերաբերում է ճիշտին:

Այս խնդիրը լուծելու համար մշակողները հնարել են տարրերը հավասարեցնելու ունիվերսալ միջոց HTML. Մեթոդը այսպես կոչված կոնտեյներների օգտագործումն է, որոնք ստեղծվում են պիտակի միջոցով

. Այսինքն՝ այն ամենը, ինչ պետք է տեղադրվի կոնկրետ տարայի մեջ, դրվում է պիտակի ներսում

. Եվ այս թեգն արդեն ունի « հատկանիշը շարել", որի արժեքը որոշում է այս կոնտեյների դիրքը: Կան երեք արժեքներ. ձախ", "կենտրոն", "ճիշտԼռելյայն, դա ձախ«Սակայն կարծում եմ, որ սա ձեզ չի զարմացնում։

Հիմա էլ նույնը գրենք HTML կոդ, բայց օգտագործելով բեռնարկղեր, բացի այդ, եկեք հավասարեցնենք ոչ թե կենտրոն, այլ աջ։

Ինչպես տեսնում եք, ամեն ինչ աշխատում է: Խորհուրդ եմ տալիս փոխել նաև հատկանիշի արժեքները « շարելդիտելու բեռնարկղերի բովանդակության հավասարեցման այլ տեսակներ:

Տարրերը հավասարեցնելու ևս մեկ եղանակ HTML- սրանք աղյուսակներ են, բայց այս թեման արժանի է առանձին քննարկման, ուստի մենք դրա մասին կխոսենք հաջորդ հոդվածներից մեկում:

Առայժմ ձեր էջը պետք է այսպիսի տեսք ունենա.

1-ին մակարդակի վերնագիր, կենտրոնում հավասարեցված

1-ին մակարդակի վերնագիր, աջ հավասարեցված

Հարգանքներով՝ Միխայիլ Ռուսակով։

P.S.Եթե ​​ցանկանում եք ավելին իմանալ դրա մասին HTML, ապա դիտեք իմ անվճար դասընթացը՝ կայք ստեղծելու օրինակով HTML:

Պատկերների համար կարող եք նշել դրանց դիրքը վեբ էջի տեքստի կամ այլ պատկերների նկատմամբ: Պատկերների հավասարեցման ձևը նշվում է align հատկանիշով:

Այս հատկանիշը հնացած է, փոխարենը օգտագործեք ոճեր:

Շարահյուսություն

Արժեքներ

Աղյուսակում 1-ը թվարկում է align հատկանիշի հնարավոր արժեքները և դրա օգտագործման արդյունքը:

Աղյուսակ 1. Օգտագործելով align հատկանիշի արժեքները

Իմաստը	Նկարագրություն	Օրինակ
ներքեւ	Հավասարեցնում է պատկերի ստորին եզրագիծը շրջակա տեքստի հետ:
ձախ	Պատկերը հավասարեցնում է պատուհանի ձախ եզրին:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
միջին	Պատկերի կեսը հավասարեցնում է ընթացիկ գծի բազայինին:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
ճիշտ	Պատկերը հավասարեցնում է պատուհանի աջ եզրին:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
գագաթ	Պատկերի վերին եզրագիծը հավասարեցված է ընթացիկ գծի ամենաբարձր տարրին:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Կանխադրված արժեք

Օրինակ

Այս տեքստը փաթաթվում է նկարի ձախ եզրին:

Բրաուզերներ

Բրաուզերի աղյուսակում օգտագործվում են հետևյալ նշումները.

• - տարրը լիովին աջակցվում է բրաուզերի կողմից.
• - տարրը չի ընկալվում բրաուզերի կողմից և անտեսվում է.
• - շահագործման ընթացքում կարող են հայտնվել տարբեր սխալներ, կամ տարրը ապահովված է վերապահումներով:

Համարը ցույց է տալիս դիտարկիչի տարբերակը, որից աջակցվում է տարրը:

HTML պիտակներ, որոնք որոշում են տեքստի հավասարեցումը և ներդիրը

Տպագրության մեջ օգտագործվող հիմնավորված տեքստ

Ստորև բերված օրինակը ցույց է տալիս, թե ինչպես կարելի է հավասարեցնել տեքստը լայնությամբէջեր:

align = "ձախ"	align = "աջ"
	Ծառայությունների ոլորտում զբաղված աշխատողների թիվը և տեղեկատվության տարածումն օրեցօր աճում է։ Եթե ​​անցյալ դարերի խորհրդանիշները եղել են ֆերման և գործարանը, ապա ներկայիս 21-րդ դարի խորհրդանիշը համակարգիչներով հագեցած գրասենյակն է, որը հասանելի է տեղեկատվական հոսքին։
align = "հիմնավորել"	align = "կենտրոն"
Ծառայությունների ոլորտում զբաղված աշխատողների թիվը և տեղեկատվության տարածումն օրեցօր աճում է։ Եթե ​​անցյալ դարերի խորհրդանիշները եղել են ֆերման և գործարանը, ապա ներկայիս 21-րդ դարի խորհրդանիշը համակարգիչներով հագեցած գրասենյակն է, որը հասանելի է տեղեկատվական հոսքին։	Ծառայությունների ոլորտում զբաղված աշխատողների թիվը և տեղեկատվության տարածումն օրեցօր աճում է։ Եթե ​​անցյալ դարերի խորհրդանիշները եղել են ֆերման և գործարանը, ապա ներկայիս 21-րդ դարի խորհրդանիշը համակարգիչներով հագեցած գրասենյակն է, որը հասանելի է տեղեկատվական հոսքին։

Արդարացված արժեքը ապահովում է միատեսակ հավասարեցնել տեքստը աջ և ձախ, այն է լայնությամբ. Այս մեթոդը լայնորեն կիրառվում է տպագրության մեջ։

HTML-ում տեքստի հավասարեցում դեպի կենտրոն և լայնություն

Հավասարեցրեք տեքստը HTML-ով կենտրոնացված, տեքստը դեպի աջ:

Արդյունք:

Հատկանիշներ և արժեքներ

• align = "ձախ" - սահմանում է ձախ տեքստի հավասարեցում(կանխադրված):
• align = "կենտրոն" - հարթեցնում է տեքստը կենտրոնին.
• align = "աջ" - հավասարեցնում է տեքստը դեպի աջ.

Հավասարեցնել | HTML տեքստի նահանջ

HTML տեքստը և դրա խորացումը էջի ձախ կողմում

Մենք կարտադրենք տեքստի նահանջձախ կողմում երկու եղանակով.

Արդյունք:

Դիտել նոր պատուհանում: