വെബ്സൈറ്റുകൾ നിർമ്മിക്കുമ്പോൾ സെന്റർ ഇമേജുകൾ, ടെക്സ്റ്റ്, ബ്ളോക്ക് ഘടകങ്ങൾ
വെബ്സൈറ്റുകൾ എങ്ങനെ നിർമ്മിക്കാമെന്ന് നിങ്ങൾ പഠിക്കുകയാണെങ്കിൽ , നിങ്ങൾ മാസ്റ്റേറ്റുചെയ്യേണ്ട ഏറ്റവും സാധാരണമായ തന്ത്രങ്ങളിൽ ഒന്ന് എങ്ങനെയാണ് ബ്രൌസർ വിൻഡോയിലെ കേന്ദ്ര ഇനങ്ങൾക്കാണ്. ഇത് പേജിൽ ഒരു ഇമേജ് കേന്ദ്രീകരിക്കുന്നതിനാണിത്, അല്ലെങ്കിൽ ഡിസൈനിന്റെ ഭാഗമായി തലക്കെട്ടുകളെപ്പോലെയുള്ള സെറ്റിറ്റ്-ന്യായീകരണ ടെക്സ്റ്റ് ആയിരിക്കും.
കാസ്കേഡിംഗ് ശൈലി ഷീറ്റുകൾ (സിഎസ്എസ്) ഉപയോഗിച്ചുകൊണ്ടുള്ളതാണ് സെൻട്രൽ ചെയ്ത ഇമേജുകളുടെയും ടെക്സ്റ്റിന്റെയും അല്ലെങ്കിൽ നിങ്ങളുടെ മുഴുവൻ വെബ്പേജിന്റെയും വിഷ്വൽ ലുക്ക് നേടുന്നതിനുള്ള ശരിയായ മാർഗ്ഗം. സെന്റർ 1.0 മുതൽ സെന്ററിംഗിന്റെ ഭൂരിഭാഗവും CSS- ലും, കൂടാതെ CSS3 , ആധുനിക വെബ് ബ്രൌസറുകളിലും മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു .
വെബ് ഡിസൈനിലെ പല വശങ്ങളും പോലെ ഒരു വെബ് പേജിലെ കേന്ദ്ര ഘടകങ്ങളിലേക്ക് CSS ഉപയോഗിക്കുന്നതിനുള്ള നിരവധി മാർഗങ്ങളുണ്ട്. ഈ വിഷ്വൽ ലുക്ക് ലഭിക്കാൻ CSS ഉപയോഗിക്കുന്നതിനുള്ള ചില വ്യത്യസ്ത മാർഗങ്ങൾ നോക്കാം.
HTML- ലെ മധ്യവർഗ ഘടകങ്ങളിലേക്ക് CSS ഉപയോഗിക്കുന്നതിനെക്കുറിച്ചുള്ള അവലോകനം
വെബ് ഡിസൈനർമാർക്ക് തുടക്കത്തിൽ ഒരു വെല്ലുവിളി സൃഷ്ടിക്കാൻ ബുദ്ധിമുട്ടുണ്ടാകും. കാരണം, ഈ വിഷ്വൽ ശൈലി നിർവഹിക്കാനായി നിരവധി മാർഗങ്ങളുണ്ട്. എല്ലാ രീതികളും എല്ലാ ഘടകങ്ങളിലും പ്രവർത്തിക്കില്ല എന്ന് അറിയാവുന്ന നല്ലതോ നല്ലതോ ആയ വെബ് ഡവലപ്പരുകൾ ആയിരിക്കാമെങ്കിലും, പുതിയ വെബ് പ്രൊഫഷണലുകൾക്ക് ഇത് വളരെ വെല്ലുവിളി നേരിടാം, കാരണം വൈവിധ്യമാർന്ന രീതികൾ എപ്പോൾ ഏത് സമീപനരീതിയാണ് ഉപയോഗിക്കേണ്ടതെന്ന് അവർക്ക് അറിയണം. ഏതാനും സമീപനങ്ങൾ മനസ്സിലാക്കുന്നതിനാണ് മികച്ച കാര്യം. നിങ്ങൾ അവ ഉപയോഗിക്കാൻ തുടങ്ങുന്പോൾ, ഏതൊക്കെ സന്ദർഭങ്ങളിൽ മികച്ച രീതിയിലാണ് പ്രവർത്തിക്കുന്നത് എന്ന് നിങ്ങൾ പഠിക്കും.
ഉയർന്ന തലത്തിൽ, നിങ്ങൾക്ക് CSS ഉപയോഗിക്കാൻ കഴിയും:
- കേന്ദ്ര വാചകം
- ഒരു ബ്ലോക്ക്-ലെവൽ ഘടകം (ഒരു ഡിവിഷൻ പോലെ) കേന്ദ്രീകരിക്കുക
- ഒരു ഇമേജ് സെന്റർ ചെയ്യുക
- ഒരു ബ്ലോക്കെയോ ഒരു ചിത്രത്തിലോ നട്ടെല്ലായി മാറുക
നിരവധി (വർഷങ്ങൾ) മുമ്പ് വെബ് ഡിസൈനർമാർക്ക് സെൻട്രൽ ഇമേജുകളും ടെക്സ്റ്റും
CSS ഉപയോഗിച്ച് ടെക്സ്റ്റ് കേന്ദ്രീകരിക്കുക
വെബ്പേജിലെ മധ്യഭാഗത്തെ ഏറ്റവും എളുപ്പമുള്ള കാര്യം വാചകമാണ്. ടെക്സ്റ്റ്-അലൈൻ ചെയ്യുക: ഇത് ചെയ്യാൻ നിങ്ങൾക്ക് അറിഞ്ഞിരിക്കേണ്ട ഒരേയൊരു ശൈലി മാത്രമാണ്. ചുവടെയുള്ള CSS ശൈലി സ്വീകരിക്കുക, ഉദാഹരണത്തിന്:
p.center {text-align: center; }
ഈ വരിയുടെ മധ്യത്തോടെ ക്ലാസ്സ് എഴുതിയ ഓരോ ഖണ്ഡികയും അതിന്റെ മാതൃനക്ഷത്രത്തിനുള്ളിൽ തിരശ്ചീനമായി കേന്ദ്രീകരിക്കും. ഉദാഹരണത്തിന്, ഖണ്ഡിക ഒരു വിഭജനത്തിലാണെങ്കിൽ, അത് ആ ഡിവിഷൻ കുട്ടിയാണെങ്കിൽ, അത്
ഇവിടെ HTML പ്രമാണത്തിൽ പ്രയോഗിച്ച ഈ വർഗ്ഗത്തിന്റെ ഒരു ഉദാഹരണം ഇതാ:
ഈ ടെക്സ്റ്റ് കേന്ദ്രീകരിച്ചു.
ടെക്സ്റ്റ്-അലൈന്ഡ് വസ്തുവിലുള്ള ടെക്സ്റ്റ് സെന്ററില്, അത് അതിന്റെ ഘടകംക്കനുസൃതമായി കേന്ദ്രീകരിച്ചുവെന്നും, മുഴുവന് പേജിന് തന്നെ കേന്ദ്രീകൃതമാകാതിരിക്കില്ല എന്നും മനസിലാക്കുക. അതോടൊപ്പം, വലിയ സെറ്റ് ലഭിക്കാനായി സെന്റർ നീതീകരിക്കപ്പെട്ട പാഠം വായിക്കാൻ ബുദ്ധിമുട്ടുണ്ടാകുമെന്നതിനാൽ, ഈ രീതി മാത്രം ഉപയോഗിക്കുക. ഒരു ലേഖനത്തിലോ മറ്റേതെങ്കിലും ഉള്ളടക്കത്തിലോ ഉള്ള ടീസറിനുള്ള ടെക്സ്റ്റ് പോലെയുള്ള തലക്കെട്ടുകളും ചെറിയ ബ്ലോക്കുകളും വായിക്കാൻ എളുപ്പമാണ്, പക്ഷേ മുഴുവൻ ലേഖനവും പോലെ വാചകത്തിന്റെ വലിയ ബ്ലോക്കുകളും ഉള്ളടക്കം പൂർണ്ണമായി കേന്ദ്രീകരിച്ചിട്ടുണ്ടെങ്കിൽ, ന്യായീകരിച്ചു. സ്മരിക്കുക, വെബ്സൈറ്റ് ടെക്സ്റ്റ് വരുമ്പോൾ വായനക്ക് എപ്പോഴും കീ !
CSS ഉള്ളുള്ള ഉള്ളടക്ക ബ്ലോക്കുകൾ സെന്റർ ചെയ്യുക
നിങ്ങളുടെ പേജിൽ ഒരു നിശ്ചിത വീതിയുള്ള എല്ലാ ഘടകങ്ങളും ബ്ലോക്ക്-ലെവൽ ഘടകം ആയി സ്ഥാപിക്കപ്പെടുന്നു. മിക്കപ്പോഴും, ഈ ബ്ലോക്കുകൾ HTML
div.center {
മാർജിൻ: 0 യാന്ത്രികം;
വീതി: 80;
}
മാർജിൻ പ്രോപ്പർട്ടിക്ക് വേണ്ടി ഈ CSS ഷോർട്ട് ഹാൻഡ്, മുകളിൽ നിന്നും താഴെയുള്ള മാർജിൻ ഒരു മൂല്യമായി സജ്ജമാക്കും, ഇടത് അല്ലെങ്കിൽ വലത് "യാന്ത്രികമായി" ഉപയോഗിക്കും. ഇത് പ്രധാനമായും ലഭ്യമായ ഒരു സ്പെയ്സ് എടുത്ത് വ്യൂപോർട്ട് വിൻഡോയുടെ ഇരുവശത്തിനും ഇടയിലായി അതിനെ വേർതിരിക്കുന്നു, ഫലത്തിൽ പേജ്യിലെ ഘടകത്തെ കേന്ദ്രീകരിക്കുന്നു.
ഇവിടെ HTML ൽ പ്രയോഗിക്കുന്നു:
പക്ഷെ അതിനുള്ള ടെക്സ്റ്റ് വിന്യസിച്ചിരിക്കുകയാണ്.
നിങ്ങളുടെ ബ്ളോക്ക് നിശ്ചയിച്ചിട്ടുള്ള ഒരു വീതിരിക്കുന്നിടത്തോളം, ഇത് അടങ്ങുന്ന മൂലകത്തിന്റെ കേന്ദ്രമായിരിക്കും. ആ ബ്ലോക്കിലുള്ള ടെക്സ്റ്റ് അതിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നതല്ല, എന്നാൽ അവശേഷിക്കുന്നു ഇടതുപക്ഷം നൽകും. ഇത് വെബ് ബ്രൌസറുകളിൽ സ്വതവേയുള്ള തെറ്റിനായി അവശേഷിക്കുന്നു. ടെക്സ്റ്റ് കേന്ദ്രീകരിച്ചു വേണം എങ്കിൽ, നിങ്ങൾ നേരത്തെ വിന്യസിച്ച ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കാൻ കഴിയും ഈ വിഭജന കേന്ദ്രത്തിൽ കേന്ദ്രീകരിച്ച്.
CSS ഉള്ള ചിത്രങ്ങൾ സെന്റർ ചെയ്യുക
മിക്ക ബ്രൗസറുകളും ഒരേ ഖണ്ഡികയ്ക്കായി നോക്കിയ അതേ ടെക്സ്റ്റ്-അലൈൻ വസ്തു ഉപയോഗിച്ച് കേന്ദ്രീകരിച്ചു കാണിക്കുമ്പോൾ, അത് W3C നിർദ്ദേശിക്കാത്തതിനാൽ ആ സാങ്കേതികവിദ്യയെ ആശ്രയിക്കാൻ നല്ല ആശയമല്ല. ഇത് ശുപാർശ ചെയ്യപ്പെടാത്തതിനാൽ, ഈ രീതി അവഗണിക്കാൻ ബ്രൗസറിന്റെ ഭാവി പതിപ്പുകൾ തിരഞ്ഞെടുക്കുവാനുള്ള ഒരു അവസരമുണ്ട്.
ടെക്സ്റ്റ്-അലൈന് ഉപയോഗിക്കുന്നതിന് പകരം ഒരു ഇമേജ് കേന്ദ്രീകരിക്കുക എന്നതാണ്, ഇമേജ് ഒരു ബ്ളോക്ക്-ലവൽ ഘടകം എന്ന് നിങ്ങൾ ബ്രൌസറിനോട് പറയണം. ഈ വഴി, നിങ്ങൾ മറ്റേതെങ്കിലും ബ്ലോക്കിലുണ്ടെന്ന് കരുതുക. ഇത് സംഭവിക്കാൻ വരുത്തുന്ന CSS ആണ്:
img.center {
പ്രദർശിപ്പിക്കുക: തടയുക;
മാർജിൻ-ഇടത്: ഓട്ടോ;
മാർജിൻ വലത്: ഓട്ടോ;
}
ഞങ്ങൾ ഇവിടെ കേന്ദ്രീകരിക്കാൻ ആഗ്രഹിക്കുന്ന ഇമേജിനുള്ള HTML ആണ്:
നിങ്ങൾക്ക് ഇൻ-ലൈൻ CSS ഉപയോഗിച്ചും നിങ്ങൾക്ക് കേന്ദ്ര വസ്തുക്കൾ ആകാം (ചുവടെ കാണുക), എന്നാൽ ഇത് നിങ്ങളുടെ HTML മാർക്കപ്പിൽ വിഷ്വൽ ശൈലികൾ ചേർക്കുന്നതിനാൽ ഈ സമീപനം ശുപാർശചെയ്യപ്പെടില്ല. ഓർക്കുക, നമ്മൾ സ്റ്റൈൽ ആവും ഘടനയും വേർതിരിക്കാൻ ആഗ്രഹിക്കുന്നു, അതിനാൽ നിങ്ങളുടെ HTML കോഡിലേക്ക് ബ്രൌസുകൂടി വേർതിരിച്ചുകൊണ്ട് CSS ശൈലികൾ ചേർക്കുന്നു, അങ്ങനെ എപ്പോൾ വേണമെങ്കിലും ഒഴിവാക്കണം.
CSS ഉപയോഗിച്ച് ലംബമായി മധ്യഭാഗത്ത് സെന്റർ ചെയ്യുന്നു
സെന്റർ വസ്തുക്കൾ ലംബമായി വെബ് ഡിസൈനിൽ എല്ലായ്പ്പോഴും വെല്ലുവിളി നേരിടുകയാണ്. എന്നാൽ CSS3 ലെ CSS ഫ്ലെക്സിബിൾ ബോക്സ് ലേഔട്ട് മൊഡ്യൂളുകളുടെ റിലീസ് അനുസരിച്ച്, അത് ഇപ്പോൾ ഒരു മാർഗമാണ്.
മുകളിലുള്ള തിരശ്ചീനമായ വിന്യാസത്തിനു സമാനമായി ലംബമായ വിന്യാസം പ്രവർത്തിക്കുന്നു. മധ്യത്തിലുള്ള മൂല്യത്തിനൊപ്പം CSS ഉള്ളത് ലംബമായി വിന്യസിക്കുക എന്നതാണ്.
.vcenter {
ലംബ-വിന്യസിക്കുക: മധ്യത്തിൽ;
}
ഈ സമീപനം കുറയുന്നു എല്ലാ ബ്രൗസറുകളും CSS FlexBox പിന്തുണയ്ക്കുന്നു എന്നതാണ്, കൂടുതൽ കൂടുതൽ ഈ പുതിയ CSS ലേഔട്ട് രീതി ചുറ്റും വരുന്നു വരികിലും! വാസ്തവത്തിൽ ഇന്ന് എല്ലാ ആധുനിക ബ്രൗസറുകളും ഇന്ന് ഈ CSS ശൈലിക്ക് പിന്തുണ നൽകുന്നുണ്ട്. ഫ്ലെക്സിബോക്സിലെ നിങ്ങളുടെ മാത്രം ആശങ്കകൾ വളരെ പഴയ ബ്രൗസർ പതിപ്പായിരിക്കും എന്നാണ് ഇത് അർത്ഥമാക്കുന്നത്.
നിങ്ങൾക്ക് പഴയ ബ്രൗസറുകളിലെ പ്രശ്നങ്ങളുണ്ടെങ്കിൽ, ഇനിപ്പറയുന്ന രീതി ഉപയോഗിച്ച് ഒരു കണ്ടെയ്നറിൽ സെർച്ച് ടെക്സ്റ്റ് ലംബമായി നിങ്ങൾ W3C നിർദ്ദേശിക്കുന്നു:
- ഡിവിഡിനെ പോലെ അടങ്ങിയ ഒരു ഘടകത്തിൽ കേന്ദ്രീകരിക്കാൻ ഘടകങ്ങൾ സ്ഥാപിക്കുക.
- അടങ്ങിയ മൂലകത്തിൽ കുറഞ്ഞത് ഉയരം സജ്ജമാക്കുക.
- ഒരു പട്ടിക സെല്ലായി ഘടകം അടങ്ങിയിരിക്കുന്നതായി പ്രഖ്യാപിക്കുക.
- ലംബമായ വിന്യാസം "മധ്യ" എന്ന് സജ്ജമാക്കുക.
ഉദാഹരണത്തിന്, ഇവിടെ CSS:
.vcenter {
മിനി-ഉയരം: 12 ഏ.
പ്രദർശിപ്പിക്കുക: പട്ടിക സെൽ;
ലംബ-വിന്യസിക്കുക: മധ്യത്തിൽ;
}
ഇവിടെ HTML ആണ്:
ഈ വാചകം ബോക്സിൽ മധ്യഭാഗത്തായി കേന്ദ്രീകരിച്ചു.
ഇന്റർനെറ്റ് എക്സ്പ്ലോററിൻറെ ലംബമാനവും പഴയ പതിപ്പുകളും
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ (IE) നെ കേന്ദ്രീകരിച്ച് ഏതെങ്കിലുമൊരു വിധത്തിൽ ഐ.ഇ. കൾ മാത്രമേ കാണാൻ കഴിയുകയുള്ളൂ, എന്നാൽ അവ ഒരു വിദ്വേഷവും വൃത്തികെട്ടവുമാണ്. ഐഇയുടെ പഴയ പതിപ്പുകൾക്കുള്ള പിന്തുണ ഉപേക്ഷിക്കുവാനുള്ള മൈക്രോസോഫ്റ്റിന്റെ സമീപകാല തീരുമാനം, ആ പിന്തുണയില്ലാത്ത ബ്രൌസറുകൾ ഉടൻ തന്നെ പുറത്തുകടക്കും, ഇത് വെബ് ഡിസൈനർമാർക്ക് സി.എസ്.എസ് FlexBox പോലുള്ള ആധുനിക ലേഔട്ട് സമീപന രീതികൾ ഉപയോഗിക്കുന്നത് എളുപ്പമാക്കും, ഇത് എല്ലാ CSS ലേഔട്ടുകളും ഉണ്ടാക്കും, എല്ലാ വെബ് ഡിസൈനർമാർക്കും കൂടുതൽ എളുപ്പത്തിൽ കേന്ദ്രീകരിക്കുന്നത്.