වෙබ් අඩවි නිර්මාණය කිරීමේදී කේන්ද්රයේ පින්තූර, පෙළ, සහ අවහිර වන මූලද්රව්ය
ඔබ වෙබ් අඩවි නිර්මාණය කරන්නේ කෙසේදැයි ඉගෙන ගන්නේ නම්, ඔබ විසින් master කිරීමට අවශ්ය පොදු උපක්රමවලින් එකක් වන්නේ බ්රව්සර් කවුළුවෙහි අයිතමයන් කේන්ද්රගත කරගන්නා ආකාරයයි. මෙම පිටුවෙහි පින්තූරයක් කේන්ද්රගත කිරීමක් අදහස් කළ හැකිය, හෝ සැලසුම් කිරීමෙහි කොටසක් ලෙස සිරස්තල වැනි මාතෘකාවන් වැනි කේන්ද්රීය යුක්තිසහගත කිරීමක් විය හැකිය.
කේන්ද්රගත කළ පින්තූර හෝ පෙළ හෝ ඔබේ මුළු වෙබ්පිටුව සඳහාම මෙම දෘශ්ය පෙනුම ලබා ගැනීම සඳහා සුදුසු ක්රමයක් වන්නේ කැස්කැඩින් ස්ටයිල් ෂීට් (CSS) භාවිතා කිරීමෙනි. කේන්ද්රගත කිරීමේ ගුණාංග බොහොමයක් 1.0 අනුවාදයේ සිට CSS3 හා නවීන වෙබ් බ්රව්සර සමඟ ඉතා හොඳින් වැඩ කරති.
වෙබ් නිර්මාණකරණයේ බොහෝ අංග මෙන් වෙබ් පිටුවක මූල ද්රව්ය කේන්ද්රගත කිරීම සඳහා CSS භාවිතා කිරීමට විවිධ ක්රම තිබේ. මෙම දෘශ්ය පෙනුම සාක්ෂාත් කර ගැනීම සඳහා CSS භාවිතා කිරීම සඳහා විවිධ ක්රම දෙස බලමු.
HTML හි කේන්ද්රීය මූලද්රව්ය වෙත CSS භාවිතා කිරීම පිළිබඳ දළ විශ්ලේෂණය පිළිබඳ දළ විශ්ලේෂණය
CSS සමමුහුර්ත කිරීම වෙබ් නිර්මාණකරුවන්ට ආරම්භ කිරීම සඳහා අභියෝගයක් විය හැකිය, මෙම එක් දෘශ්ය ශෛලිය ඉටු කිරීම සඳහා විවිධ ක්රම රැසක් ඇත. සෑම ක්රමයකින්ම සියලුම තාක්ෂණයන් ක්රියාත්මක නොවන බව හොඳ ක්රමයක් හෝ විවිධාකාර ක්රමයක් විය හැකි නමුත්, නව වෙබ් අඩවි වෘත්තිකයන් සඳහා බිහිසුණු අභියෝගයක් විය හැකිය. කළ යුතු හොඳම දේ වන්නේ ප්රවේශයන් කිහිපයක් පිළිබඳ අවබෝධයක් ලබාගැනීමයි. ඔබ ඒවා භාවිතා කිරීමට පටන්ගත් විට, ඔබ කුමන අවස්ථාවලදී උපරිම ක්රියා කරන්නේ කුමන ක්රමයදැයි ඔබ ඉගෙන ගනු ඇත.
ඉහළ මට්ටමක දී ඔබට CSS භාවිතා කළ හැකිය:
- කේන්ද්රීය පෙළ
- බ්ලොක් මට්ටමේ අංගයක් (අංශයක් වැනි)
- රූපයක් සාදන්න
- බ්ලොක් එකක් හෝ රූපයක් vertically center
බොහෝ (බොහෝ) වසර ගණනාවකට පෙර වෙබ් අඩවි නිර්මාණකරුවන්ට මධ්යස්ථ රූප සහ පෙළ කේන්ද්රගත කිරීම සඳහා භාවිතා කළ හැකි නමුත් HTML අංගය දැන් අතහැර දමා ඇති අතර නවීන වෙබ් බ්රවුසර තුළ තවදුරටත් පහසුකම් සපයන්නේ නැත. මෙයින් අදහස් කරන්නේ ඔබ ඔබගේ පිටු නිවැරදිව ප්රදර්ශනය කර නවීන ප්රමිතීන්ට අනුකූලව මෙම HTML අංගය භාවිතා නොකළ යුතුය යන්නයි! මෙම මූලද්රව්යය අතහැර දැමීමට හේතුව වූයේ, බොහෝ විට, නවීන වෙබ් අඩවිවල ව්යුහය සහ ස්වරය පැහැදිලිව වෙන්වීමක් තිබිය යුතුය. CSS විසින් ආකෘතියක් නිර්මාණය කරන අතර HTML ආකෘතිය භාවිතා කරයි. කේන්ද්රගත කිරීම මූලද්රව්යයක් යනු දෘශ්ය ලක්ෂණයක් වන අතර එහි ඇති දේ වලට වඩා පෙනෙන ආකාරයට එය CSS සමඟ හැසිරවිය හැක, HTML නොවේ. නූතන වෙබ් ප්රමිතීන් අනුව HTML සැකසුමට
CSS සමඟ කේන්ද්රගත කිරීම
වෙබ් පිටුවක කේන්ද්රගත කිරීම පහසුම දෙය වන්නේ පෙළ. මෙය කිරීමට දැන ගැනීමට අවශ්ය එක් වර්ගයේ ස්වරූපය ඇත: පෙළ-align. උදාහරණයක් ලෙස පහත CSS විලාසනය ගෙන යන්න:
p.center {පෙළ-align: center; }}
CSS මෙම රේඛාව සමඟ මධ්යස්ථ පන්තිය සමග ලිඛිතව සෑම ඡේදයක් ම තිරස් අතට එහි මාපිය මූලද්රව්යය තුළ කේන්ද්රගත කෙරෙනු ඇත. නිදසුනක් වශයෙන්, ඡේදය අංශකයක් තුල නම්, එය එම කොට්ඨාශයේ දරුවා විය යුතු ය, එය
මෙන්න මෙම HTML පත්රයෙහි මෙම පංතියේ උදාහරණයක් වේ:
මෙම පෙළ කේන්ද්රගතව ඇත.
පෙළ-පෙළගැස්ම සහිතව පෙළ කේන්ද්රගත කිරීමේදී, එහි අඩංගු මූලද්රව්යය තුල කේන්ද්රගතව ඇති අතර, එය සම්පූර්ණයෙන්ම පිටුව තුළම කේන්ද්රගත නොවේ. මධ්යස්ථ යුක්තිසහගත වූ පෙළ විශාල අන්තර්ගතයන් සඳහා කියවීමට අමාරු විය හැකි බව මතක තබාගන්න. එමනිසා මෙම ස්වරූපයෙන් උපයෝගී කර ගන්න. ලිපියක් සහ වෙනත් අන්තර්ගතයක් සඳහා ටේස්ටර් පෙළ වැනි ලිපි ශීර්ෂ පාඨ සහ කුඩා කොටස් වල කේන්ද්රගතව කේන්ද්රගත වූ විට පහසුවෙන් කියවිය හැකි හා හොඳයි, නමුත් අන්තර්ගතයේ සම්පූර්ණ මධ්යස්ථානයක් වුවහොත්, සම්පූර්ණ ලිපියක් වැනි විශාල ලිපිගොනු ලෙස එය පරිභෝජනය කිරීම අභියෝගාත්මක වනු ඇත යුක්ති සහගත ය. මතක තබාගන්න, පාඨමය වෙබ් අඩවියට පිවිසීමේදී සැමවිටම කියවීමේ හැකියාව තිබේ !
CSS සමඟ අන්තර්ගත බ්ලොක් මධ්යස්ථාන
බ්ලොක් යනු ඔබේ වෙබ් පිටුවෙහි අර්ථ දක්වන ලද පළලක් සහිත වන අතර එය බ්ලොක් මට්ටමේ මූලද්රව්යයක් ලෙස ස්ථාපිත කර ඇත. බොහෝ විට මෙම HTML කොටස්
div.center {
ආන්තික: 0 auto;
පළල: 80 ඊ;
}}
ආන්තික දේපල සඳහා මෙම CSS කෙටි විස්තරය, ඉහළ සහ පහළ මායිම් 0 හි අගය වන අතර වමේ සහ දකුණ "auto" භාවිතා කරනු ඇත. මෙය අනිවාර්යයෙන්ම ලබා ගත හැකි ඕනෑම අවකාශයක් සහ දර්ශන කවුළුවෙහි දෙපැත්ත අතර එක සමාන ලෙස බෙදීම, එම පිටුවෙහි මූලද්රව්යය කේන්ද්රගත කිරීමයි.
මෙහිදී එය HTML හි භාවිතා වේ:
නමුත් එහි ඇතුළත පෙළගැස්මක් ඉතිරි වී ඇත.
ඔබගේ බ්ලොක් අර්ථ දක්වන ලද පළලක් තිබිය දී ම එය අඩංගු මූලද්රව්යය තුළ කේන්ද්රගත වේ. එම කොටසේ අඩංගු පාඨය තුළ එය කේන්ද්රගත නොවනු ඇත, නමුත් ඉතිරිව ඇත. මෙය becaus text වෙබ් බ්රව්සර වල පෙරනිමි ලෙස යුක්තිසහගත වේ. ඔබට අවශ්ය පරිදි පාඨය කේන්ද්රගත වූවා නම්, මෙම ක්රමය සමඟ සහයෝගීව අප විසින් ආවරණය කරන ලද පෙළ-ගැලපුම් දේපල, අංශය කේන්ද්රගත කිරීම සඳහා භාවිතා කළ හැකිය.
CSS සමඟ මධ්යස්ථ රූප
බොහෝ බ්රවුසරයන් ඡේදය සඳහා දැනටමත් දිහා බලන ලද එකම පාඨය භාවිතා කරමින් කේන්ද්රගත කරන ලද රූප පෙන්වන අතර, එය W3C විසින් නිර්දේශ නොකරන බැවින් එම තාක්ෂණය මත රඳා සිටීම හොඳ අදහසක් නොවේ. එය නිර්දේශ කර නොමැති නිසා, බ්රව්සරයේ අනාගත අනුවාදයන් මෙම ක්රමය නොසලකා හැරීමට අවස්ථාවක් තිබේ.
රූපයක් කේන්ද්රගත කිරීම සඳහා පෙළ-ඇලවීම වෙනුවට රූපය බ්ලොක් මට්ටමේ මූලද්රව්යයක් බව බ්රව්සරයට පැවසිය යුතුය. මේ ආකාරයෙන්, ඔබ වෙනත් ඕනෑම වාරණයක් ලෙස එය කේන්ද්රගත කළ හැකිය. මෙය සිදු කිරීමට CSS මෙන්න:
img.center {
පදර්ශනය: බ්ෙලොක්;
ආන්තික වම: ස්වයං;
ආන්තික-දකුණ: ඔටෝ;
}}
අපි කේන්ද්රගත වීමට කැමති රූපයේ ඇති HTML:
ඔබට අන්තර්ජාලයේ CSS භාවිතා කරන වස්තු කේන්ද්ර කර ගත හැකිය (පහත බලන්න), නමුත් එය ඔබේ HTML සලකුණු බවට දෘශ්ය විලාසයන් එකතු කරන බැවින් මෙම ප්රවේශය නිර්දේශ කර නැත. මතක තබාගන්න, අපි විලාසිතා හා ව්යූහය වෙන් කිරීමට අවශ්ය නම්, වෙන්වීම බිඳී යාමෙන් ඔබේ HTML කේතයට CSS ශෛලයට එකතු කිරීම සහ ඒ නිසා, හැකි සෑම විටම එය මග හැරිය යුතුය.
CSS සමඟ කේන්ද්රගත කිරීමේ මූලද්රව්යය
CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3 CSS
ඉහත පරිදි ආවරණය කර ඇති තිරස් මට්ටමේ සමාන්තරව ක්රියා කරයි. CSS ගුණාංගය මධ්යම අගය සමග සිරස් අනුකූල වේ.
.center {
සිරස්-රේඛාව: මධ්යම;
}}
මෙම ප්රවේශයට ඇති දුර්වලතාව වන්නේ සියලු බ්රවුසර් CSS FlexBox වලට සහය වන නමුත්, මෙම නව CSS පිරිසැලසුම් ක්රමය වෙත තව තවත් වැඩි වෙමින් පවතී! ඇත්ත වශයෙන්ම, වර්තමානයේ සියලු නූතන බ්රව්සරයන් දැන් මෙම CSS ශෛලියට සහය දක්වයි. මෙහි තේරුම නම් ෆ්ලැප්සෝබොක් සමඟ ඇති එකම ගැටලුව වන්නේ වැඩිහිටි බ්රවුසර් අනුවාදයයි.
ඔබ පැරණි වෙබ් බ්රව්සර සමඟ ගැටළු තිබේ නම්, W3C ඔබ විසින් පහත සඳහන් ක්රමවේදය භාවිතා කර පරිවාරකයක් තුළ සිරස් අතට සිරස් අතට යොමු කරයි:
- මූලද්රව්යයක් ලෙස බෙදුම් රාමුව තුළ කේන්ද්රගත කිරීම සඳහා මූලද්රව්ය ස්ථානගත කරන්න.
- අඩංගු මූලද්රව්යයේ අවම උසයි.
- මූලද්රව්යය අඩංගු කොටුවක් ලෙස අඩංගු වන බව ප්රකාශ කරන්න.
- සිරස් පැත්තක් "මැද" දක්වා සකසන්න.
උදාහරණයක් ලෙස, CSS:
.center {
min-height: 12em;
සංදර්ශකය: වගු-කොටු;
සිරස්-රේඛාව: මධ්යම;
}}
මෙන්න HTML:
මෙම පෙළ සිරස් අතට කොටු කර තිබේ.
Internet Explorer හි සිරස් මධ්යස්ථ සහ පැරණි සංස්කරණ
Internet Explorer (IE) බලසම්පන්න කිරීමට බල කිරීම සඳහා ක්රම කිහිපයක් තිබේ. IE පමණක් භාවිතා කරන විලාසයන් පෙනෙන පරිදි කොන්දේසිගත විවරණ භාවිතා කරති. ශුභාරංචිය වන්නේ IE හි පැරණි අනුවාදයන් සඳහා වූ සහයෝගය ඉවත් කිරීමයි. මෙම නොබැඳි බ්රව්සරයන් ඉක්මනින් පිටතට යා යුතු අතර, වෙබ් නිර්මාණකරුවන්ට CSS FlexBox වැනි නවීන රූගත කිරීම් ප්රවේශයන් භාවිතා කිරීම පහසු කරනු ඇත. CSS සැලැස්ම, හුදෙක් කේන්ද්රීය නොවන, සියලු වෙබ් නිර්මාණකරුවන්ට වඩාත් පහසු වනු ඇත.