Ձեր կայքը հավասարեցրեք կենտրոնին

Բովանդակություն:

Ձեր կայքը հավասարեցրեք կենտրոնին
Ձեր կայքը հավասարեցրեք կենտրոնին
Anonim

Կոդավորելու ժամանակ վեբ-վարպետը ստիպված է շատ ջանք գործադրել, որպեսզի կայքը հավասարապես լավ տեսք ունենա էկրանի տարբեր լուծումներով: Լավագույն լուծումը էջում ամբողջ բովանդակությունը կենտրոնացնելն է:

Ձեր կայքը հավասարեցրեք կենտրոնին
Ձեր կայքը հավասարեցրեք կենտրոնին

Հրահանգներ

Քայլ 1

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

… Իհարկե, ավելի հեշտ է ամբողջ բովանդակությունը պիտակի մեջ փաթաթել, բայց այն վաղուց հնացել է, և երաշխիք չկա, որ ամեն ինչ ճիշտ կաշխատի: Ամենաժամանակակից միջոցը CSS տեխնոլոգիայի օգտագործումն է:

Քայլ 2

Պիտակը ծածկում է ծածկագրի մի մասը մեկ բլոկի ՝ թույլ տալով փոխել բովանդակության տեսքը ՝ հատվածին տալով մեկ տառատեսակ, գույն, ֆոն և այլն: Բլոկի դասավորությամբ պիտակի ամբողջ բովանդակությունը տեղադրվում է պիտակի մեջ: Մեջ մենք հավասարեցում ենք հավասարեցման հատկանիշին: Դա նման կլինի այսպես.

Կայքի բովանդակությունը

Քայլ 3

Կենտրոնացումը կարող է դրվել նաև CSS գործիքների միջոցով: Դա անելու համար հարկավոր է ստեղծել ոճաթերթերի առանձին ֆայլ կամ ամեն ինչ տեղադրել նույն HTML ֆայլի մեջ, պիտակի մեջ: Կոդն այսպիսի տեսք կունենա.

* {margin: 0; լիցքավորում ՝ 0;}

մարմին {

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

}

div {

լայնությունը `700px;

լուսանցք ՝ 0 ավտոմատ;

}

Քայլ 4

Սեղանի դասավորության մեջ կենտրոնացումը դրվում է ՝ օգտագործելով պիտակի մեջ պարունակվող սեղաններ

… Կոդն այսպիսին կլինի. <Կայքի աղյուսակ

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

Քայլ 5

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

Քայլ 6

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

Խորհուրդ ենք տալիս: