വ്ലാഡ് മെർഷെവിച്ച്

ടേബിൾ സെല്ലുകളുടെ ഉള്ളടക്കങ്ങൾ ഒരേസമയം തിരശ്ചീനമായും ലംബമായും വിന്യസിക്കാമെന്ന വസ്തുത കാരണം, പരസ്പരം ആപേക്ഷികമായ മൂലകങ്ങളുടെ സ്ഥാനം നിയന്ത്രിക്കുന്നതിനുള്ള സാധ്യതകൾ വിപുലീകരിക്കപ്പെടുന്നു. ഇമേജുകൾ, ടെക്‌സ്‌റ്റ്, ഫോം ഫീൽഡുകൾ, മറ്റ് ഘടകങ്ങൾ എന്നിവ പരസ്പരം ആപേക്ഷികവും വെബ് പേജും മൊത്തത്തിൽ ക്രമീകരിക്കാൻ പട്ടികകൾ നിങ്ങളെ അനുവദിക്കുന്നു. പൊതുവേ, വിഷ്വൽ ആശയവിനിമയം സ്ഥാപിക്കുന്നതിന് പ്രധാനമായും വിന്യാസം ആവശ്യമാണ് വ്യത്യസ്ത ഘടകങ്ങൾ, അതുപോലെ അവരുടെ ഗ്രൂപ്പിംഗുകൾ.

ലംബ കേന്ദ്രീകരണം

സൈറ്റിൻ്റെ ഫോക്കസും പേരും സന്ദർശകനെ കാണിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം ഒരു സ്പ്ലാഷ് പേജ് ഉപയോഗിക്കുക എന്നതാണ്. ഒരു ചട്ടം പോലെ, ഒരു ഫ്ലാഷ് സ്പ്ലാഷ് സ്ക്രീനോ സൈറ്റിൻ്റെ പ്രധാന ആശയം പ്രകടിപ്പിക്കുന്ന ഒരു ചിത്രമോ ഉള്ള ആദ്യ പേജാണിത്. സൈറ്റിൻ്റെ മറ്റ് വിഭാഗങ്ങളിലേക്കുള്ള ഒരു ലിങ്ക് കൂടിയാണ് ചിത്രം. മോണിറ്റർ റെസല്യൂഷൻ പരിഗണിക്കാതെ നിങ്ങൾ ഈ ചിത്രം ബ്രൗസർ വിൻഡോയുടെ മധ്യഭാഗത്ത് സ്ഥാപിക്കേണ്ടതുണ്ട്. ഈ ആവശ്യത്തിനായി, നിങ്ങൾക്ക് 100% വീതിയും ഉയരവുമുള്ള ഒരു പട്ടിക ഉപയോഗിക്കാം (ഉദാഹരണം 1).

ഉദാഹരണം 1: ഡ്രോയിംഗ് കേന്ദ്രീകരിക്കുന്നു

അലൈൻമെൻ്റ് ടേബിൾ (വീതി: 100%; /* പട്ടിക വീതി */ ഉയരം: 100%; /* പട്ടിക ഉയരം */ )

IN ഈ ഉദാഹരണത്തിൽ align="center" ടാഗ് പാരാമീറ്റർ ഉപയോഗിച്ചാണ് തിരശ്ചീന വിന്യാസം സജ്ജീകരിച്ചിരിക്കുന്നത് , കൂടാതെ സെല്ലിലെ ഉള്ളടക്കങ്ങൾ ലംബമായി കേന്ദ്രീകരിച്ചിരിക്കണമെന്നില്ല, കാരണം ഇത് സ്ഥിരസ്ഥിതി സ്ഥാനമാണ്.

പട്ടികയുടെ ഉയരം 100% ആയി സജ്ജീകരിക്കാൻ, നിങ്ങൾ നീക്കം ചെയ്യേണ്ടതുണ്ട്, കോഡ് ഇനി സാധുതയുള്ളതല്ല.

വെബ്‌പേജിൻ്റെ ലഭ്യമായ മുഴുവൻ ഏരിയയും കവർ ചെയ്യുന്നതിന് വീതിയും ഉയരവും ഉപയോഗിക്കുന്നത്, പട്ടികയുടെ ഉള്ളടക്കം അതിൻ്റെ വലുപ്പം പരിഗണിക്കാതെ തന്നെ ബ്രൗസർ വിൻഡോയുടെ മധ്യഭാഗത്ത് കൃത്യമായി വിന്യസിക്കുമെന്ന് ഉറപ്പാക്കുന്നു.

തിരശ്ചീന വിന്യാസം

ആട്രിബ്യൂട്ടുകൾ സംയോജിപ്പിച്ച് വിന്യസിക്കുക (തിരശ്ചീന വിന്യാസം), വാലിൻ ( ലംബ വിന്യാസം) ടാഗ് , പരസ്പരം ആപേക്ഷികമായി മൂലകങ്ങളുടെ പല തരത്തിലുള്ള സ്ഥാനങ്ങൾ സജ്ജീകരിക്കുന്നത് അനുവദനീയമാണ്. ചിത്രത്തിൽ. മൂലകങ്ങളെ തിരശ്ചീനമായി വിന്യസിക്കുന്നതിനുള്ള വഴികൾ ചിത്രം 1 കാണിക്കുന്നു.

ചുവടെയുള്ള ചിത്രം അനുസരിച്ച് ടെക്സ്റ്റ് വിന്യാസത്തിൻ്റെ ചില ഉദാഹരണങ്ങൾ നോക്കാം.

മുകളിലെ വിന്യാസം

ഒരു ടാഗിനായി സെൽ ഉള്ളടക്കങ്ങളുടെ മുകളിലെ വിന്യാസം വ്യക്തമാക്കാൻ നിങ്ങൾ മൂല്യം ടോപ്പ് ഉപയോഗിച്ച് valign ആട്രിബ്യൂട്ട് സജ്ജമാക്കേണ്ടതുണ്ട് (ഉദാഹരണം 2).

ഉദാഹരണം 2: valign ഉപയോഗിക്കുന്നു

വിന്യാസം

കോളം 1

കോളം 2

ഈ ഉദാഹരണത്തിൽ, ടാഗ് പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് സെൽ സവിശേഷതകൾ നിയന്ത്രിക്കപ്പെടുന്നു , എന്നാൽ ശൈലികളിലൂടെ മാറ്റാൻ ഇത് കൂടുതൽ സൗകര്യപ്രദമാണ്.

പ്രത്യേകിച്ചും, സെല്ലുകളിലെ വിന്യാസം വെർട്ടിക്കൽ-അലൈൻ, ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടികൾ (ഉദാഹരണം 3) വഴി വ്യക്തമാക്കുന്നു.

ഉദാഹരണം 3: വിന്യാസത്തിനായി ശൈലികൾ പ്രയോഗിക്കുന്നു

കോളം 1

കോളം 2

അലൈൻമെൻ്റ് ടേബിൾ (വീതി: 100%; /* പട്ടിക വീതി */ ) #col1 (വീതി: 75%; /* ആദ്യ നിര വീതി */ പശ്ചാത്തലം: #f0f0f0; /* ആദ്യ കോളം പശ്ചാത്തല നിറം */ ) #col2 (വീതി: 25 %; /* രണ്ടാമത്തെ നിരയുടെ വീതി */ പശ്ചാത്തലം: #fc5; ; / * ടോപ്പ് അലൈൻമെൻ്റ് */ പാഡിംഗ്: 5px /* സെൽ ഉള്ളടക്കങ്ങൾക്ക് ചുറ്റുമുള്ള മാർജിനുകൾ */ )

കോഡ് ചെറുതാക്കാൻ, ഈ ഉദാഹരണം സെലക്ടറുകളുടെ ഗ്രൂപ്പിംഗ് ഉപയോഗിക്കുന്നു, കാരണം ഒരേ സമയം രണ്ട് സെല്ലുകളിൽ ലംബ-അലൈൻ, പാഡിംഗ് പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുന്നു.

താഴെയുള്ള വിന്യാസം അതേ രീതിയിൽ ചെയ്യുന്നു, പക്ഷേ മുകളിലെ മൂല്യത്തിന് പകരം താഴെയാണ് ഉപയോഗിക്കുന്നത്.

കേന്ദ്ര വിന്യാസം സ്ഥിരസ്ഥിതിയായി, സെൽ ഉള്ളടക്കങ്ങൾ അവയുടെ ലംബ വരയുടെ മധ്യഭാഗത്തേക്ക് വിന്യസിച്ചിരിക്കുന്നു, അതിനാൽ നിരകൾക്ക് വ്യത്യസ്ത ഉയരങ്ങളുണ്ടെങ്കിൽ, നിങ്ങൾ അലൈൻമെൻ്റ് മുകളിലെ അരികിലേക്ക് സജ്ജമാക്കേണ്ടതുണ്ട്.ചിലപ്പോൾ നിങ്ങൾ ഇപ്പോഴും പോകേണ്ടതുണ്ട്

യഥാർത്ഥ രീതി

വിന്യാസം, ഉദാഹരണത്തിന്, ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ ഫോർമുലകൾ സ്ഥാപിക്കുമ്പോൾ. 2.

വിന്യാസം

(18.6)

ഈ സാഹചര്യത്തിൽ, ഫോർമുല ബ്രൗസർ വിൻഡോയുടെ മധ്യഭാഗത്ത് കർശനമായി സ്ഥിതിചെയ്യുന്നു, അതിൻ്റെ നമ്പർ വലത് അരികിൽ സ്ഥിതിചെയ്യുന്നു. ഈ രീതിയിൽ ഘടകങ്ങൾ ക്രമീകരിക്കുന്നതിന്, നിങ്ങൾക്ക് മൂന്ന് സെല്ലുകളുള്ള ഒരു ടേബിൾ ആവശ്യമാണ്. പുറം കോശങ്ങൾക്ക് ഒരേ അളവുകൾ ഉണ്ടായിരിക്കണം, മധ്യ സെല്ലിൽ വിന്യാസം കേന്ദ്രീകരിച്ചിരിക്കുന്നു, വലത് സെല്ലിൽ - വലത് അരികിൽ (ഉദാഹരണം 4). ഫോർമുല മധ്യഭാഗത്ത് സ്ഥാപിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ ഈ സെല്ലുകളുടെ എണ്ണം ആവശ്യമാണ്.

ഉദാഹരണം 4: ഫോർമുല വിന്യാസം

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ സെൽ ശൂന്യമായി അവശേഷിക്കുന്നു;

ഫോം ഘടകങ്ങൾ വിന്യസിക്കുന്നു പട്ടികകൾ ഉപയോഗിച്ച്, ഫോം ഫീൽഡുകളുടെ സ്ഥാനം നിർണ്ണയിക്കുന്നത് സൗകര്യപ്രദമാണ്, പ്രത്യേകിച്ചും അവ ടെക്സ്റ്റുമായി വിഭജിക്കുമ്പോൾ. ഒരു അഭിപ്രായം രേഖപ്പെടുത്താൻ ഉദ്ദേശിച്ചുള്ള ഫോമിൻ്റെ ഡിസൈൻ ഓപ്ഷനുകളിലൊന്ന് ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 3.ഫോം ഫീൽഡുകൾക്ക് സമീപമുള്ള വാചകം വലതുവശത്തേക്ക് വിന്യസിക്കുന്നതിനും ഫോം ഘടകങ്ങൾ ഇടത്തേക്ക് വിന്യസിക്കുന്നതിനും നിങ്ങൾക്ക് ഒരു പട്ടിക ആവശ്യമാണ്

അദൃശ്യമായ അതിർത്തി

രണ്ട് കോളങ്ങളും. ഇടത് നിരയിൽ വാചകം തന്നെ അടങ്ങിയിരിക്കും, വലത് കോളത്തിൽ ടെക്സ്റ്റ് ഫീൽഡുകൾ അടങ്ങിയിരിക്കും (ഉദാഹരണം 5).

ഉദാഹരണം 5: ഫോം ഫീൽഡുകൾ വിന്യസിക്കുന്നു
വിന്യാസം
പേര്

ഈ ഉദാഹരണത്തിൽ, വലത് വിന്യാസം ആവശ്യമുള്ള സെല്ലുകൾക്ക്, align="right" ആട്രിബ്യൂട്ട് ചേർക്കുന്നു.

കമൻ്റ് ലേബൽ മൾട്ടിലൈൻ ടെക്‌സ്‌റ്റിൻ്റെ മുകളിൽ സ്ഥാനം പിടിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ, വാലിൻ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് അനുബന്ധ സെൽ മുകളിൽ അലൈൻ ചെയ്‌തിരിക്കുന്നു.

വെബ്സൈറ്റ് പേജുകളുടെ ലേഔട്ടും സെൻ്റർ അലൈൻമെൻ്റും ഒരു സൃഷ്ടിപരമായ ശ്രമമാണ്, ഇത് തുടക്കക്കാർക്ക് പലപ്പോഴും ബുദ്ധിമുട്ടുകൾ ഉണ്ടാക്കുന്നു. എങ്കിൽ അത് എങ്ങനെ ചെയ്യാമെന്ന് നോക്കാം. ഇനിപ്പറയുന്ന ഘടനയുള്ള ഒരു പേജ് നിർമ്മിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് പറയാം:

ഞങ്ങളുടെ പേജിൽ നാല് ബ്ലോക്കുകൾ അടങ്ങിയിരിക്കുന്നു: തലക്കെട്ട്, മെനു, ഉള്ളടക്കം, അടിക്കുറിപ്പ്. പേജ് കേന്ദ്രീകരിക്കാൻ, ഞങ്ങൾ ഈ നാല് ബ്ലോക്കുകളെ ഒരു പ്രധാന ബ്ലോക്കിലേക്ക് മാറ്റും:

സൈറ്റ് തലക്കെട്ട്

ഉള്ളടക്കം

സൈറ്റിൻ്റെ അടിഭാഗം

ഈ ഘടന ഒരു ഉദാഹരണമായി ഉപയോഗിച്ച്, ഞങ്ങൾ നിരവധി ഓപ്ഷനുകൾ പരിഗണിക്കും.

ഒരു റബ്ബർ സൈറ്റിൻ്റെ ലേഔട്ടും കേന്ദ്രീകരണവും ഒരു റബ്ബർ വെബ്‌സൈറ്റ് സ്ഥാപിക്കുമ്പോൾ, പ്രധാന അളവെടുപ്പ് യൂണിറ്റ് -% ആണ്, കാരണം സൈറ്റ് വീതിയിലുടനീളം വ്യാപിക്കുകയും മുഴുവൻ ഉൾക്കൊള്ളുകയും വേണം..

സ്വതന്ത്ര സ്ഥലം

അതിനാൽ, "ഹെഡർ", "ഫൂട്ടർ" ബ്ലോക്കുകളുടെ വീതി സ്ക്രീൻ വീതിയുടെ 100% ആയിരിക്കും. "മെനു" ബ്ലോക്കിൻ്റെ വീതി 30% ആയിരിക്കട്ടെ, "ഉള്ളടക്കം" ബ്ലോക്ക് "മെനു" ബ്ലോക്കിന് അടുത്തായി സ്ഥിതിചെയ്യണം, അതായത്. അതിന് "മെനു" ബ്ലോക്കിൻ്റെ വീതിക്ക് തുല്യമായ വീതിയുള്ള ഇടത് മാർജിൻ (മാർജിൻ-ഇടത്) ഉണ്ടായിരിക്കണം, അതായത്. 30%.

"മെനു", "ഉള്ളടക്കം" ബ്ലോക്കുകൾ പരസ്പരം അടുത്ത് ഇരിക്കാൻ, നമുക്ക് "മെനു" ബ്ലോക്ക് ഫ്ലോട്ടിംഗ് ആക്കി ഇടത് അരികിലേക്ക് തള്ളാം. ഞങ്ങളുടെ ബ്ലോക്കുകളുടെ പശ്ചാത്തല നിറങ്ങളും ഞങ്ങൾ സജ്ജമാക്കും. ഇനി ഇതെല്ലാം സ്റ്റൈൽ ഷീറ്റിൽ എഴുതാം (style.css പേജിൽ)

#header(പശ്ചാത്തലം:#3e4982; വീതി:100%; ഉയരം:110px; ടെക്സ്റ്റ്-അലൈൻ:സെൻ്റർ; കളർ:#FFFFFF; font-size:24px; padding-top:40px; ) #menu(പശ്ചാത്തലം:#6173cb; ഫ്ലോട്ട് :ഇടത്; വീതി:300px; font-size:18px; #ഉള്ളടക്കം #3e4982;ഉയരം:50px;#FFFFFF;

ബ്ലോക്കുകളുടെ ഉയരം സോപാധികമായി സജ്ജമാക്കിയതിനാൽ ഫലം ദൃശ്യമാകും. നിങ്ങളുടെ ബ്രൗസറിൽ ഞങ്ങളുടെ പേജ് നോക്കുക:

... #മെനു(പശ്ചാത്തലം:#6173cb; ഫ്ലോട്ട്:ഇടത്; വീതി:200px; ഉയരം:300px; ) #ഉള്ളടക്കം(പശ്ചാത്തലം:#ffffff; മാർജിൻ-ഇടത്:200px; ഉയരം:300px; ) ...

ഇപ്പോൾ ഞങ്ങളുടെ പേജ് കൂടുതൽ സ്വാഭാവികമായി നീളുന്നു. ചെയ്തത് റബ്ബർ ലേഔട്ട്പേജുകൾ സ്ക്രീനിൻ്റെ മുഴുവൻ വീതിയും എടുക്കുന്നു, അതിനാൽ പേജ് വിന്യാസം ആവശ്യമില്ല.

എന്നാൽ നിങ്ങൾക്ക് വേണമെങ്കിൽ, നിങ്ങളുടെ പേജിന് സ്‌ക്രീനിൻ്റെ ഇടത്തും വലത്തും തുല്യമായ പാഡിംഗ് ഉള്ളതാക്കാം. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ "പ്രധാന" ബ്ലോക്കിലേക്ക് ഒരു ശൈലി ചേർക്കേണ്ടതുണ്ട്, അത് മറ്റെല്ലാ ബ്ലോക്കുകൾക്കുമുള്ള ഒരു കണ്ടെയ്നറാണ്:

ഇപ്പോൾ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:

സൈറ്റിൻ്റെ ലേഔട്ടും കേന്ദ്രവും, നിശ്ചിത വീതി

ഈ സാഹചര്യത്തിൽ നമുക്ക് ചോദിക്കേണ്ടി വരും നിശ്ചിത വലുപ്പങ്ങൾഞങ്ങളുടെ ബ്ലോക്കുകൾ:

#പ്രധാന (വീതി:800px; ) #തലക്കെട്ട് (പശ്ചാത്തലം:#3e4982; വീതി:800px; ഉയരം:150px; ടെക്സ്റ്റ്-അലൈൻ:സെൻ്റർ; നിറം:#FFFFFF; ഫോണ്ട്-സൈസ്:24px; പാഡിംഗ്-ടോപ്പ്:40px; ) #മെനു (പശ്ചാത്തലം:#6173cb; ഫ്ലോട്ട്:ഇടത്; വീതി:200px; ഉയരം:300px; ടെക്സ്റ്റ്-അലൈൻ:സെൻ്റർ; നിറം:#FFFFFF; font-size:18px; padding-top:10px; ) #content(പശ്ചാത്തലം:#ffffff; മാർജിൻ-ഇടത്: 200 പിക്സൽ; ഉയരം: 300 പിക്സൽ; വാചകം-അലൈൻ: മധ്യഭാഗം; വലിപ്പം: 14px; പാഡിംഗ് ടോപ്പ്: 10px )

ഇപ്പോൾ ഞങ്ങളുടെ പേജ് സ്ക്രീനിൻ്റെ ഇടത് അറ്റത്ത് അമർത്തിയിരിക്കുന്നു.

ഈ സാഹചര്യത്തിൽ, സൈറ്റ് പേജുകളുടെ കേന്ദ്ര വിന്യാസം ഇനിപ്പറയുന്ന രീതിയിൽ ചെയ്യാവുന്നതാണ്. ഞങ്ങളുടെ പേജിന് ഒരു "ബോഡി" ടാഗ് ഉണ്ടെന്ന് ഓർക്കുക, അതിന് വീതിയും കുറച്ച് പാഡിംഗും നൽകാം.

നമുക്ക് ഇത് ചെയ്യാം: "ബോഡി" ടാഗിന് 800 പിക്‌സൽ വീതിയും ("പ്രധാന" ബ്ലോക്ക് പോലെ) 50% പാഡിംഗ്-ഇടത് ഭാഗവും നൽകുക. അപ്പോൾ "പ്രധാന" ബ്ലോക്കിൻ്റെ മുഴുവൻ ഉള്ളടക്കങ്ങളും സ്ക്രീനിൻ്റെ വലതുവശത്ത് പ്രദർശിപ്പിക്കും (അതായത് മധ്യത്തിൽ നിന്ന് വലത്തേക്ക്):

ഞങ്ങളുടെ "പ്രധാന" ബ്ലോക്ക് സ്‌ക്രീനിൻ്റെ മധ്യത്തിൽ സ്ഥാപിക്കുന്നതിന്, അതിൻ്റെ മധ്യഭാഗം "ബോഡി" ടാഗിൻ്റെ മധ്യവുമായി പൊരുത്തപ്പെടണം. ആ. നിങ്ങൾ "പ്രധാന" ബ്ലോക്ക് അതിൻ്റെ പകുതി വലുപ്പത്തിൽ ഇടത്തേക്ക് മാറ്റേണ്ടതുണ്ട്. "പ്രധാന" ബ്ലോക്കിൻ്റെ വീതി 800 പിക്സലുകൾ ആണ്, അതിനർത്ഥം നിങ്ങൾ അതിനായി "മാർജിൻ-ഇടത്:-400px" എന്ന പ്രോപ്പർട്ടി സജ്ജീകരിക്കേണ്ടതുണ്ട് എന്നാണ്. അതെ, ഈ പ്രോപ്പർട്ടി നെഗറ്റീവ് മൂല്യങ്ങൾ എടുക്കാം, തുടർന്ന് ഇടത് മാർജിൻ കുറയുന്നു (അതായത് ഇടത്തേക്ക് മാറ്റുന്നു). ഇതുതന്നെയാണ് നമുക്ക് വേണ്ടത്.

സ്റ്റൈൽ ഷീറ്റ് ഇപ്പോൾ ഇതുപോലെ കാണപ്പെടുന്നു:

ബോഡി(വീതി:800px; പാഡിംഗ്-ഇടത്:50%; ) #പ്രധാന(വീതി:800px; മാർജിൻ-ഇടത്:-400px; ) #തലക്കെട്ട്(പശ്ചാത്തലം:#3e4982; വീതി:800px; ഉയരം:150px; വാചകം-അലൈൻ:മധ്യത്തിൽ ;#FFFFFF; font-size:24px; font-size:18px;padding-top:10px; വീതി:800px;ടെക്സ്റ്റ്-അലൈൻ:സെൻ്റർ;ഫോണ്ട്-സൈസ്:14px;

ബ്രൗസറിലെ ഞങ്ങളുടെ പേജ് കൃത്യമായി മധ്യത്തിലാണ് സ്ഥിതി ചെയ്യുന്നത്:

സൈറ്റ് പേജുകൾ കേന്ദ്രീകരിക്കുന്നതിനുള്ള രണ്ട് ഓപ്ഷനുകൾ ഞങ്ങൾ പരിശോധിച്ചു; നിങ്ങൾക്ക് പരീക്ഷണം നടത്താനും നിങ്ങളുടെ സ്വന്തം പതിപ്പ് കൊണ്ടുവരാനും കഴിയും, അത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് പരിശോധിക്കുക വ്യത്യസ്ത ബ്രൗസറുകൾ. നിർഭാഗ്യവശാൽ, ഫയർഫോക്സിലോ ഓപ്പറയിലോ നന്നായി കാണിക്കുന്നവ IE യിലും തിരിച്ചും പൂർണ്ണമായും മനസ്സിലാക്കാൻ കഴിയാത്തവിധം പ്രദർശിപ്പിച്ചേക്കാം. കൂടാതെ നാം ഇത് ഓർക്കണം.

നിങ്ങളുടെ സൃഷ്ടിപരമായ അന്വേഷണത്തിൽ നിങ്ങൾക്ക് ആശംസകൾ!

മൂലകങ്ങളെ ലംബമായി കേന്ദ്രീകരിക്കുന്നു CSS ഉപയോഗിക്കുന്നുഡെവലപ്പർമാർക്ക് ചില ബുദ്ധിമുട്ടുകൾ നൽകുന്ന ഒരു ടാസ്ക് ആണ്. എന്നിരുന്നാലും, ഇത് പരിഹരിക്കുന്നതിന് നിരവധി മാർഗങ്ങളുണ്ട്, അവ വളരെ ലളിതമാണ്. IN ഈ പാഠം 6 ഓപ്ഷനുകൾ അവതരിപ്പിച്ചു ലംബ കേന്ദ്രീകരണംഉള്ളടക്കം.

നമുക്ക് തുടങ്ങാം പൊതുവായ വിവരണംചുമതലകൾ.

ലംബ കേന്ദ്രീകരണ പ്രശ്നം

തിരശ്ചീന കേന്ദ്രീകരണം വളരെ ലളിതവും എളുപ്പവുമാണ്. കേന്ദ്രീകൃത ഘടകം ഇൻലൈൻ ആയിരിക്കുമ്പോൾ, ഞങ്ങൾ അലൈൻ റിലേറ്റീവ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു മാതൃ ഘടകം. ഘടകം ബ്ലോക്ക്-ലെവൽ ആയിരിക്കുമ്പോൾ, ഞങ്ങൾ അതിൻ്റെ വീതിയും സജ്ജമാക്കി ഓട്ടോമാറ്റിക് ഇൻസ്റ്റലേഷൻഇടത് വലത് അരികുകൾ.

മിക്ക ആളുകളും ഉപയോഗിക്കുന്നത് ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി:, ലംബമായി-അലൈൻ പ്രോപ്പർട്ടി ലംബമായി കേന്ദ്രത്തിലേക്ക് ആക്സസ് ചെയ്യുക. എല്ലാം തികച്ചും യുക്തിസഹമായി തോന്നുന്നു. നിങ്ങൾ ടേബിൾ ടെംപ്ലേറ്റുകൾ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ ഒരുപക്ഷേ valign ആട്രിബ്യൂട്ട് വിപുലമായി ഉപയോഗിച്ചിട്ടുണ്ടാകും, ഇത് ലംബമായി വിന്യസിക്കുന്നു എന്ന വിശ്വാസത്തെ ശക്തിപ്പെടുത്തുന്നു. ശരിയായ വഴിപ്രശ്നം പരിഹരിക്കാൻ.

എന്നാൽ valign ആട്രിബ്യൂട്ട് ടേബിൾ സെല്ലുകളിൽ മാത്രമേ പ്രവർത്തിക്കൂ. ലംബ-അലൈൻ പ്രോപ്പർട്ടി അതിനോട് വളരെ സാമ്യമുള്ളതാണ്. ഇത് ടേബിൾ സെല്ലുകളെയും ചില ഇൻലൈൻ ഘടകങ്ങളെയും ബാധിക്കുന്നു.

ലംബ-അലൈൻ പ്രോപ്പർട്ടിയുടെ മൂല്യം പാരൻ്റ് ഇൻലൈൻ ഘടകവുമായി ബന്ധപ്പെട്ടതാണ്.

• വാചകത്തിൻ്റെ ഒരു വരിയിൽ, ലൈൻ ഉയരവുമായി ബന്ധപ്പെട്ടതാണ് വിന്യാസം.
• ഒരു പ്രത്യേക അൽഗോരിതം (സാധാരണയായി വരി ഉയരം) കണക്കാക്കിയ മൂല്യവുമായി ബന്ധപ്പെട്ട വിന്യാസമാണ് പട്ടിക സെൽ ഉപയോഗിക്കുന്നത്.

പക്ഷേ, നിർഭാഗ്യവശാൽ, ബ്ലോക്ക്-ലെവൽ ഘടകങ്ങളിൽ ലംബ-അലൈൻ പ്രോപ്പർട്ടി പ്രവർത്തിക്കുന്നില്ല (ഉദാഹരണത്തിന്, ഒരു ഡിവി എലമെൻ്റിനുള്ളിലെ ഖണ്ഡികകൾ). ഈ സാഹചര്യം ലംബ വിന്യാസത്തിൻ്റെ പ്രശ്നത്തിന് പരിഹാരമില്ലെന്ന് ചിന്തിക്കാൻ ഒരാളെ നയിച്ചേക്കാം.

എന്നാൽ ബ്ലോക്ക് മൂലകങ്ങളെ കേന്ദ്രീകരിക്കുന്നതിനുള്ള മറ്റ് രീതികളുണ്ട്, അവ തിരഞ്ഞെടുക്കുന്നത് ബാഹ്യ കണ്ടെയ്നറുമായി ബന്ധപ്പെട്ട് കേന്ദ്രീകരിച്ചിരിക്കുന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു.

ലൈൻ-ഹൈറ്റ് രീതി

ഈ രീതിവാചകത്തിൻ്റെ ഒരു വരി ലംബമായി കേന്ദ്രീകരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ പ്രവർത്തിക്കുന്നു. നിങ്ങൾ ചെയ്യേണ്ടത് ഫോണ്ട് വലുപ്പത്തേക്കാൾ വലുതായി വരിയുടെ ഉയരം സജ്ജമാക്കുക എന്നതാണ്.

സ്ഥിരസ്ഥിതിയായി, വൈറ്റ് സ്പേസ് ടെക്സ്റ്റിൻ്റെ മുകളിലും താഴെയുമായി തുല്യമായി വിതരണം ചെയ്യും. ഒപ്പം ലൈൻ ലംബമായി കേന്ദ്രീകരിക്കും. പലപ്പോഴും ലൈൻ ഉയരം നിർമ്മിക്കുന്നു തുല്യ ഉയരംമൂലകം .

HTML:

ആവശ്യമായ വാചകം

CSS:

#കുട്ടി (ലൈൻ-ഉയരം: 200px; )

ഈ രീതി എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്നു, എന്നിരുന്നാലും ഇത് ഒരു വരിയിൽ മാത്രമേ ഉപയോഗിക്കാൻ കഴിയൂ. ഉദാഹരണത്തിലെ മൂല്യം 200 px ഏകപക്ഷീയമായി തിരഞ്ഞെടുത്തു. ഏത് മൂല്യങ്ങളും ഉപയോഗിക്കാം വലിയ വലിപ്പംടെക്സ്റ്റ് ഫോണ്ട്.

ലൈൻ-ഹൈറ്റ് ഉപയോഗിച്ച് ഒരു ചിത്രം കേന്ദ്രീകരിക്കുന്നു

ഉള്ളടക്കം ഒരു ചിത്രമാണെങ്കിൽ? മുകളിൽ പറഞ്ഞ രീതി പ്രവർത്തിക്കുമോ? ഉത്തരം CSS കോഡിൻ്റെ ഒരു വരി കൂടിയുണ്ട്.

HTML:

CSS:

#പാരൻ്റ് (ലൈൻ-ഉയരം: 200px; ) #പാരൻ്റ് ഇമേജ് (ലംബമായി-അലൈൻ: മധ്യം;)

ലൈൻ-ഹൈറ്റ് പ്രോപ്പർട്ടിയുടെ മൂല്യം ചിത്രത്തിൻ്റെ ഉയരത്തേക്കാൾ കൂടുതലായിരിക്കണം.

CSS പട്ടിക രീതി

ടേബിൾ സെല്ലുകൾക്കായി വെർട്ടിക്കൽ-അലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നുവെന്ന് മുകളിൽ സൂചിപ്പിച്ചിരുന്നു, അവിടെ അത് മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു. ഞങ്ങൾക്ക് ഞങ്ങളുടെ എലമെൻ്റ് ഒരു ടേബിൾ സെല്ലായി പ്രദർശിപ്പിക്കാനും ഉള്ളടക്കത്തെ ലംബമായി കേന്ദ്രീകരിക്കാൻ അതിലെ ലംബ-അലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കാനും കഴിയും.

ശ്രദ്ധിക്കുക: ഒരു CSS പട്ടിക ഒരു HTML ടേബിളിന് സമാനമല്ല.

HTML:

ഉള്ളടക്കം

CSS:

#പാരൻ്റ് (ഡിസ്‌പ്ലേ: ടേബിൾ;) #കുട്ടി (ഡിസ്‌പ്ലേ: ടേബിൾ-സെൽ; ലംബ-അലൈൻ: മിഡിൽ; )

ഞങ്ങൾ ടേബിൾ ഔട്ട്പുട്ട് പാരൻ്റ് ഡിവി എലമെൻ്റിലേക്ക് സജ്ജീകരിക്കുകയും നെസ്റ്റഡ് ഡിവി എലമെൻ്റ് ഒരു ടേബിൾ സെല്ലായി ഔട്ട്പുട്ട് ചെയ്യുകയും ചെയ്യുന്നു. നിങ്ങൾക്ക് ഇപ്പോൾ അകത്തെ കണ്ടെയ്‌നറിലെ ലംബ-അലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കാം. അതിൽ എല്ലാം ലംബമായി കേന്ദ്രീകരിക്കും.

മുകളിൽ വിവരിച്ച രീതിയിൽ നിന്ന് വ്യത്യസ്തമായി, ഇൻ ഈ സാഹചര്യത്തിൽഡിവി എലമെൻ്റ് അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് വലുപ്പം മാറ്റുന്നതിനാൽ ഉള്ളടക്കം ചലനാത്മകമായിരിക്കും.

ഐഇയുടെ പഴയ പതിപ്പുകളിൽ ഇത് പ്രവർത്തിക്കില്ല എന്നതാണ് ഈ രീതിയുടെ പോരായ്മ. നെസ്റ്റഡ് കണ്ടെയ്‌നറിനായി നിങ്ങൾ ഡിസ്‌പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക് പ്രോപ്പർട്ടി ഉപയോഗിക്കേണ്ടതുണ്ട്.

സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയവും നെഗറ്റീവ് മാർജിനുകളും

ഈ രീതി എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്നു. എന്നാൽ കേന്ദ്രീകരിച്ചിരിക്കുന്ന മൂലകത്തിന് ഒരു ഉയരം നൽകേണ്ടത് ആവശ്യമാണ്.

ഉദാഹരണ കോഡ് ഒരേ സമയം തിരശ്ചീനവും ലംബവുമായ കേന്ദ്രീകരണം നടത്തുന്നു:

HTML:

ഉള്ളടക്കം

CSS:

#മാതാപിതാവ് (സ്ഥാനം: ബന്ധു;) #കുട്ടി (സ്ഥാനം: കേവലം; മുകളിൽ: 50%; ഇടത്: 50%; ഉയരം: 30%; വീതി: 50%; മാർജിൻ: -15% 0 0 -25%; )

ആദ്യം, ഞങ്ങൾ എലമെൻ്റ് പൊസിഷനിംഗ് തരം സജ്ജമാക്കി. അടുത്തതായി, ഞങ്ങൾ നെസ്റ്റഡ് ഡിവി എലമെൻ്റിൻ്റെ മുകളിലും ഇടത്തും ഉള്ള പ്രോപ്പർട്ടികൾ 50% ആയി സജ്ജീകരിച്ചു, ഇത് പാരൻ്റ് എലമെൻ്റിൻ്റെ മധ്യഭാഗവുമായി യോജിക്കുന്നു. എന്നാൽ ഇടത് കേന്ദ്രത്തിലേക്ക് പ്രവേശിക്കുന്നു മുകളിലെ മൂലനെസ്റ്റഡ് ഘടകം. അതിനാൽ, നിങ്ങൾ അത് ഉയർത്തി (പകുതി ഉയരം) ഇടത്തേക്ക് (പകുതി വീതി) നീക്കേണ്ടതുണ്ട്, തുടർന്ന് മധ്യഭാഗം പാരൻ്റ് എലമെൻ്റിൻ്റെ കേന്ദ്രവുമായി പൊരുത്തപ്പെടും. അതിനാൽ ഈ കേസിൽ മൂലകത്തിൻ്റെ ഉയരം അറിയേണ്ടത് ആവശ്യമാണ്. തുടർന്ന് ഞങ്ങൾ മൂലകത്തെ നെഗറ്റീവ് ടോപ്പും ഇടത് അരികുകളും യഥാക്രമം പകുതി ഉയരത്തിനും വീതിക്കും തുല്യമായി സജ്ജമാക്കുന്നു.

ഈ രീതി എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കില്ല.

സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയവും നീട്ടലും

ഉദാഹരണ കോഡ് ലംബവും തിരശ്ചീനവുമായ കേന്ദ്രീകരണം നടത്തുന്നു.

HTML:

ഉള്ളടക്കം

CSS:

#മാതാപിതാവ് (സ്ഥാനം: ബന്ധു;) #കുട്ടി (സ്ഥാനം: കേവലം; മുകളിൽ: 0; താഴെ: 0; ഇടത്: 0; വലത്: 0; വീതി: 50%; ഉയരം: 30%; മാർജിൻ: ഓട്ടോ; )

മുകളിൽ, താഴെ, വലത്, ഇടത് പ്രോപ്പർട്ടികൾ 0 ആയി സജ്ജീകരിച്ച് പാരൻ്റ് എലമെൻ്റിൻ്റെ എല്ലാ 4 ബോർഡറുകളിലേക്കും നെസ്റ്റഡ് എലമെൻ്റ് നീട്ടുക എന്നതാണ് ഈ രീതിയുടെ പിന്നിലെ ആശയം.

എല്ലാ വശങ്ങളിലും സ്വയമേവ ജനറേറ്റുചെയ്യാൻ മാർജിനുകൾ സജ്ജീകരിക്കുന്നത് 4 വശങ്ങളിലും തുല്യ മൂല്യങ്ങൾ സജ്ജീകരിക്കുകയും ഞങ്ങളുടെ നെസ്റ്റഡ് ഡിവി ഘടകത്തെ അതിൻ്റെ പാരൻ്റ് എലമെൻ്റിൽ കേന്ദ്രീകരിക്കുകയും ചെയ്യും.

നിർഭാഗ്യവശാൽ, ഈ രീതി IE7-ലും താഴെയും പ്രവർത്തിക്കുന്നില്ല.

മുകളിലും താഴെയുമായി തുല്യ ഇടങ്ങൾ

ഈ രീതിയിൽ, പാരൻ്റ് എലമെൻ്റിന് മുകളിലും താഴെയുമായി തുല്യ പാഡിംഗ് വ്യക്തമായി സജ്ജീകരിച്ചിരിക്കുന്നു.

HTML:

ഉള്ളടക്കം

CSS:

#മാതാപിതാവ് (പാഡിംഗ്: 5% 0; ) #കുട്ടി (പാഡിംഗ്: 10% 0; )

കോഡിൽ ഉദാഹരണം CSSരണ്ട് ഘടകങ്ങൾക്കും മുകളിലും താഴെയുമുള്ള അരികുകൾ സജ്ജീകരിച്ചിരിക്കുന്നു. ഒരു നെസ്റ്റഡ് എലമെൻ്റിന്, പാഡിംഗ് സജ്ജീകരിക്കുന്നത് അതിനെ ലംബമായി കേന്ദ്രീകരിക്കാൻ സഹായിക്കും. കൂടാതെ പാരൻ്റ് എലമെൻ്റിൻ്റെ പാഡിംഗ് അതിനുള്ളിലെ നെസ്റ്റഡ് എലമെൻ്റിനെ കേന്ദ്രീകരിക്കും.

വേണ്ടി ചലനാത്മകമായ മാറ്റംഉപയോഗിച്ച മൂലക വലുപ്പങ്ങൾ ആപേക്ഷിക യൂണിറ്റുകൾഅളവുകൾ. സമ്പൂർണ്ണ അളവെടുപ്പ് യൂണിറ്റുകൾക്കായി നിങ്ങൾ കണക്കുകൂട്ടലുകൾ നടത്തേണ്ടതുണ്ട്.

ഉദാഹരണത്തിന്, പാരൻ്റ് എലമെൻ്റിന് 400px ഉയരവും നെസ്റ്റഡ് എലമെൻ്റ് 100px ഉം ആണെങ്കിൽ, മുകളിലും താഴെയുമായി 150px പാഡിംഗ് ആവശ്യമാണ്.

150 + 150 + 100 = 400

കണക്കുകൂട്ടലുകൾ ബ്രൗസറിലേക്ക് വിടാൻ % ഉപയോഗിക്കുന്നത് നിങ്ങളെ അനുവദിക്കുന്നു.

ഈ രീതി എല്ലായിടത്തും പ്രവർത്തിക്കുന്നു. കണക്കുകൂട്ടലുകളുടെ ആവശ്യകതയാണ് പോരായ്മ.

ശ്രദ്ധിക്കുക: മൂലകത്തിൻ്റെ പുറം പാഡിംഗ് സജ്ജീകരിച്ച് ഈ രീതി പ്രവർത്തിക്കുന്നു. ഒരു ഘടകത്തിനുള്ളിൽ നിങ്ങൾക്ക് മാർജിനുകളും ഉപയോഗിക്കാം. പ്രോജക്റ്റിൻ്റെ പ്രത്യേകതകൾ അനുസരിച്ച് മാർജിനുകൾ അല്ലെങ്കിൽ പാഡിംഗുകൾ ഉപയോഗിക്കുന്നതിനുള്ള തീരുമാനം എടുക്കണം.

ഫ്ലോട്ടിംഗ് ഡിവി

ഈ രീതി ഒരു ശൂന്യമായ div ഘടകം ഉപയോഗിക്കുന്നു, അത് ഫ്ലോട്ട് ചെയ്യുകയും ഡോക്യുമെൻ്റിലെ നമ്മുടെ നെസ്റ്റഡ് എലമെൻ്റിൻ്റെ സ്ഥാനം നിയന്ത്രിക്കാൻ സഹായിക്കുകയും ചെയ്യുന്നു. HTML കോഡിലെ ഞങ്ങളുടെ നെസ്റ്റഡ് എലമെൻ്റിന് മുമ്പായി ഫ്ലോട്ടിംഗ് ഡിവ് സ്ഥാപിച്ചിരിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക.

HTML:

ഉള്ളടക്കം

CSS:

#പാരൻ്റ് (ഉയരം: 250px;) #ഫ്ലോറ്റർ (ഫ്ലോട്ടർ: ഇടത്; ഉയരം: 50%; വീതി: 100%; മാർജിൻ-ബോട്ടം: -50px; ) #കുട്ടി (വ്യക്തം: രണ്ടും; ഉയരം: 100px; )

ഞങ്ങൾ ശൂന്യമായ ഡിവിയെ ഇടത്തോട്ടോ വലത്തോട്ടോ ഓഫ്‌സെറ്റ് ചെയ്യുകയും അതിൻ്റെ ഉയരം അതിൻ്റെ പാരൻ്റ് എലമെൻ്റിൻ്റെ 50% ആക്കുകയും ചെയ്യുന്നു. ഈ രീതിയിൽ ഇത് പാരൻ്റ് എലമെൻ്റിൻ്റെ മുകളിലെ പകുതി നിറയ്ക്കും.

ഈ ഡിവി ഫ്ലോട്ടിംഗ് ആയതിനാൽ, ഡോക്യുമെൻ്റിൻ്റെ സാധാരണ ഫ്ലോയിൽ നിന്ന് ഇത് നീക്കം ചെയ്യപ്പെടും, കൂടാതെ നെസ്റ്റഡ് എലമെൻ്റിൽ നമുക്ക് ടെക്സ്റ്റ് അൺറാപ്പ് ചെയ്യേണ്ടതുണ്ട്. ഉദാഹരണം ക്ലിയർ ഉപയോഗിക്കുന്നു: രണ്ടും , എന്നാൽ ഫ്ലോട്ട് ഓഫ്‌സെറ്റിൻ്റെ അതേ ദിശ ഉപയോഗിച്ചാൽ മതി ശൂന്യമായ ഘടകംഡിവി.

നെസ്റ്റഡ് ഡിവി എലമെൻ്റിൻ്റെ മുകളിലെ ബോർഡർ നേരിട്ട് താഴെയാണ് താഴ്ന്ന പരിധിഒരു ശൂന്യമായ div ഘടകം. ഫ്ലോട്ടിംഗ് ശൂന്യമായ മൂലകത്തിൻ്റെ പകുതി ഉയരത്തിൽ നെസ്റ്റഡ് എലമെൻ്റ് മുകളിലേക്ക് നീക്കേണ്ടതുണ്ട്. പ്രശ്നം പരിഹരിക്കാൻ, ഫ്ലോട്ടിംഗ് ശൂന്യമായ ഡിവി എലമെൻ്റിന് നെഗറ്റീവ് മാർജിൻ-ബോട്ടം പ്രോപ്പർട്ടി മൂല്യം ഉപയോഗിക്കുക.

ഈ രീതി എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്നു. എന്നിരുന്നാലും, ഇത് ഉപയോഗിക്കുന്നതിന് അധിക ശൂന്യമായ ഡിവി ഘടകവും നെസ്റ്റഡ് മൂലകത്തിൻ്റെ ഉയരത്തെക്കുറിച്ചുള്ള അറിവും ആവശ്യമാണ്.

ഉപസംഹാരം

വിവരിച്ച എല്ലാ രീതികളും ഉപയോഗിക്കാൻ എളുപ്പമാണ്. അവയൊന്നും എല്ലാ കേസുകൾക്കും അനുയോജ്യമല്ല എന്നതാണ് ബുദ്ധിമുട്ട്. നിങ്ങൾ പ്രോജക്റ്റ് വിശകലനം ചെയ്യുകയും അനുയോജ്യമായ ഒന്ന് തിരഞ്ഞെടുക്കുകയും വേണം സാധ്യമായ ഏറ്റവും മികച്ച രീതിയിൽആവശ്യങ്ങൾ അനുസരിച്ച്.

നിങ്ങൾ സൃഷ്ടിച്ച ഏതെങ്കിലും വെബ്‌സൈറ്റ് മുറിക്കുകയാണെങ്കിൽ html അടിസ്ഥാനമാക്കിയുള്ളതാണ്, അപ്പോൾ ഒരു നിശ്ചിത ലെയർ-ബൈ-ലെയർ ഘടന നിങ്ങളുടെ മുന്നിൽ ദൃശ്യമാകും. മാത്രമല്ല, സ്വന്തം കൂടെ രൂപംഅതിന് സമാനമായിരിക്കും പാളി കേക്ക്. ഇത് നിങ്ങൾക്ക് ഇതുപോലെ തോന്നുന്നുവെങ്കിൽ, മിക്കവാറും നിങ്ങൾ വളരെക്കാലമായി ഭക്ഷണം കഴിച്ചിട്ടില്ല. അതിനാൽ ആദ്യം നിങ്ങളുടെ വിശപ്പ് തൃപ്തിപ്പെടുത്തുക, തുടർന്ന് നിങ്ങളുടെ സൈറ്റിൽ ഒരു ഡിവി ലെയർ എങ്ങനെ കേന്ദ്രീകരിക്കാമെന്ന് ഞങ്ങൾ നിങ്ങളോട് പറയും:

ഒരു ടാഗ് ഉപയോഗിച്ചുള്ള ലേഔട്ടിൻ്റെ പ്രയോജനങ്ങൾ

വെബ്‌സൈറ്റ് ഘടനയിൽ രണ്ട് പ്രധാന തരങ്ങളുണ്ട്:

• ടാബുലാർ;
• തടയുക.

ഇൻറർനെറ്റിൻ്റെ ആരംഭത്തിൽ പോലും ടാബുലാർ ലേഔട്ട് പ്രബലമായിരുന്നു. അതിൻ്റെ ഗുണങ്ങളിൽ നിർദ്ദിഷ്ട സ്ഥാനനിർണ്ണയത്തിൻ്റെ കൃത്യത ഉൾപ്പെടുന്നു. എന്നിരുന്നാലും, ഇതിന് വ്യക്തമായ പോരായ്മകളുണ്ട്. പ്രധാനവ കോഡിൻ്റെ വോളിയവും കുറഞ്ഞ വേഗതഡൗൺലോഡുകൾ.

പട്ടിക ലേഔട്ട് ഉപയോഗിക്കുമ്പോൾ, വെബ് പേജ് വരെ പ്രദർശിപ്പിക്കില്ല മുഴുവൻ ലോഡ്. ഡിവി ബ്ലോക്കുകൾ ഉപയോഗിക്കുമ്പോൾ, ഘടകങ്ങൾ ഉടനടി പ്രദർശിപ്പിക്കും.

ഒഴികെ ഉയർന്ന വേഗതസൈറ്റിൻ്റെ ലോഡിംഗ് ബ്ലോക്ക് നിർമ്മാണം വോളിയം നിരവധി തവണ കുറയ്ക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു html കോഡ്. CSS ക്ലാസുകളുടെ ഉപയോഗത്തിലൂടെ ഉൾപ്പെടെ.

എന്നിരുന്നാലും, പേജിലെ ഡാറ്റയുടെ ഡിസ്പ്ലേ രൂപപ്പെടുത്തുന്നതിന് ടാബ്ലർ ലേഔട്ട് ഉപയോഗിക്കണം. അതിൻ്റെ ഉപയോഗത്തിൻ്റെ ഒരു മികച്ച ഉദാഹരണം പട്ടികകളുടെ പ്രദർശനമാണ്.

ടാഗുകളെ അടിസ്ഥാനമാക്കിയുള്ള ബ്ലോക്ക് നിർമ്മാണത്തെ ലെയർ-ബൈ-ലെയർ എന്നും വിളിക്കുന്നു, കൂടാതെ ബ്ലോക്കുകളെ തന്നെ പാളികൾ എന്നും വിളിക്കുന്നു. കാരണം, ചില പ്രോപ്പർട്ടി മൂല്യങ്ങൾ ഉപയോഗിക്കുമ്പോൾ, ഫോട്ടോഷോപ്പിലെ ലെയറുകൾക്ക് സമാനമായി അവ പരസ്പരം അടുക്കാൻ കഴിയും.

സ്ഥാനനിർണ്ണയ സഹായങ്ങൾ

ബ്ലോക്ക് ലേഔട്ടിൽ, കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിച്ച് ലെയറുകൾ സ്ഥാപിക്കുന്നതാണ് നല്ലത്. ലേഔട്ടിന് ഉത്തരവാദിത്തമുള്ള പ്രധാന CSS പ്രോപ്പർട്ടി ഫ്ലോട്ട് ആണ്.
പ്രോപ്പർട്ടി വാക്യഘടന:
ഫ്ലോട്ട്: ഇടത് | വലത് | ഒന്നുമില്ല | അനന്തരാവകാശം
എവിടെ:

• ഇടത് - സ്ക്രീനിൻ്റെ ഇടത് അറ്റത്തേക്ക് ഘടകം വിന്യസിക്കുക. ശേഷിക്കുന്ന മൂലകങ്ങൾക്ക് ചുറ്റുമുള്ള ഒഴുക്ക് വലതുവശത്ത് സംഭവിക്കുന്നു;
• വലത് - വലതുവശത്ത് വിന്യാസം, മറ്റ് ഘടകങ്ങൾക്ക് ചുറ്റും ഒഴുകുക - ഇടതുവശത്ത്;
• ഒന്നുമില്ല - പൊതിയുന്നത് അനുവദനീയമല്ല;
• അവകാശം - മാതൃ മൂലകത്തിൻ്റെ മൂല്യം അവകാശമാക്കുന്നു.

ഈ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് divs പൊസിഷനിംഗ് ചെയ്യുന്നതിനുള്ള ഒരു ഭാരം കുറഞ്ഞ ഉദാഹരണം നോക്കാം:

#ഇടത് (വീതി: 200px; ഉയരം: 100px; ഫ്ലോട്ട്: ഇടത്; പശ്ചാത്തലം: rgb (255,51,102); ) #വലത് (വീതി: 200px; ഉയരം: 100px; ഫ്ലോട്ട്: വലത്; പശ്ചാത്തലം: rgb (0,255,153); ) ഇടത് ബ്ലോക്ക്; വലത് ബ്ലോക്ക്

പേജിൻ്റെ മധ്യഭാഗത്ത് മൂന്നാം ഡിവിയെ സ്ഥാപിക്കാൻ ഞങ്ങൾ ഇപ്പോൾ അതേ പ്രോപ്പർട്ടി ഉപയോഗിക്കാൻ ശ്രമിക്കും. എന്നാൽ നിർഭാഗ്യവശാൽ ഫ്ലോട്ടിന് ഒരു കേന്ദ്ര മൂല്യമില്ല. നിങ്ങൾ ഒരു പുതിയ ബ്ലോക്കിന് വലത്തോട്ടോ ഇടത്തോട്ടോ ഒരു വിന്യാസ മൂല്യം നൽകുമ്പോൾ, അത് നിർദ്ദിഷ്ട ദിശയിലേക്ക് മാറ്റുന്നു. അതിനാൽ, ഫ്ലോട്ട് സജ്ജീകരിക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത്: മൂന്ന് ബ്ലോക്കുകളിലേക്കും ഇടത്:

എന്നാൽ ഇത് അങ്ങനെയല്ല മികച്ച ഓപ്ഷൻ. ജാലകത്തിൻ്റെ വലിപ്പം കുറയുമ്പോൾ, എല്ലാ പാളികളും ഒരു വരിയിൽ ലംബമായി നിരത്തുന്നു, വലിപ്പം വർദ്ധിപ്പിക്കുമ്പോൾ അവ വിൻഡോയുടെ ഇടതുവശത്ത് ഒട്ടിപ്പിടിക്കുന്നു. അതിനാൽ ഞങ്ങൾക്ക് കൂടുതൽ ആവശ്യമാണ് തികഞ്ഞ വഴി div കേന്ദ്രത്തിലേക്ക് വിന്യസിക്കുക.

പാളികൾ കേന്ദ്രീകരിക്കുന്നു

അടുത്ത ഉദാഹരണത്തിൽ, ഞങ്ങൾ ഒരു കണ്ടെയ്നർ പാളി ഉപയോഗിക്കും, അതിൽ ശേഷിക്കുന്ന ഘടകങ്ങൾ ഞങ്ങൾ സ്ഥാപിക്കും. വിൻഡോ വലുപ്പം മാറ്റുമ്പോൾ ബ്ലോക്കുകൾ പരസ്പരം ആപേക്ഷികമായി നീങ്ങുന്നതിൻ്റെ പ്രശ്നം ഇത് പരിഹരിക്കുന്നു. പ്രോപ്പർട്ടികൾ മാർജിൻ സജ്ജീകരിച്ചാണ് മധ്യഭാഗത്ത് കണ്ടെയ്നർ കേന്ദ്രീകരിക്കുന്നത് പൂജ്യം മൂല്യംമുകളിലെ അരികിൽ നിന്നുള്ള അരികുകളും വശങ്ങളിൽ സ്വയവും (മാർജിൻ: 0 ഓട്ടോ ):

#കണ്ടെയ്‌നർ (വീതി: 600px; മാർജിൻ: 0 ഓട്ടോ; ) #ഇടത് (വീതി: 200px; ഉയരം: 100px; ഫ്ലോട്ട്: ഇടത്; പശ്ചാത്തലം: rgb(255,51,102); ) #വലത് (വീതി: 200px; ഉയരം: 100px; ഫ്ലോട്ട് : ഇടത്; പശ്ചാത്തലം: rgb(0,255,153);

നിങ്ങൾക്ക് എങ്ങനെ ഒരു ഡിവിയെ തിരശ്ചീനമായി കേന്ദ്രീകരിക്കാമെന്ന് ഇതേ ഉദാഹരണം കാണിക്കുന്നു. മുകളിലുള്ള കോഡ് നിങ്ങൾ ചെറുതായി എഡിറ്റുചെയ്യുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ബ്ലോക്കുകളുടെ ലംബ വിന്യാസം നേടാനാകും. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ കണ്ടെയ്നർ ലെയറിൻ്റെ നീളം മാറ്റേണ്ടതുണ്ട് (അത് കുറയ്ക്കുക). അതായത്, അതിൻ്റെ css ക്ലാസ് എഡിറ്റ് ചെയ്ത ശേഷം ഇതുപോലെ ആയിരിക്കണം:

മാറ്റത്തിന് ശേഷം, എല്ലാ ബ്ലോക്കുകളും മധ്യത്തിൽ ഒരു വരിയിൽ കർശനമായി അണിനിരക്കും. ബ്രൗസർ വിൻഡോ വലുപ്പം കണക്കിലെടുക്കാതെ അവരുടെ സ്ഥാനം മാറില്ല. ഒരു div ലംബമായി കേന്ദ്രീകരിക്കുന്നത് ഇങ്ങനെയാണ്:

ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ, ഒരു കണ്ടെയ്‌നറിനുള്ളിലെ ലെയറുകളുടെ മധ്യഭാഗത്തേക്ക് ഞങ്ങൾ നിരവധി പുതിയ css പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചു:

#കണ്ടെയ്‌നർ (വീതി: 450px; ഉയരം: 150px; മാർജിൻ: 0 ഓട്ടോ; പശ്ചാത്തല-നിറം:#66CCFF; ) #ഇടത് (വീതി: 100px; ഉയരം: 100px; പശ്ചാത്തലം: rgb(255,51,102); പ്രദർശനം: ഇൻലൈൻ-ബ്ലോക്ക്; ലംബമായി വിന്യസിക്കുക: മധ്യഭാഗം: മാർജിൻ-ഇടത്: 35 പിക്സൽ; #മധ്യഭാഗം (വീതി: 100px; ഉയരം: 100px; പശ്ചാത്തലം: rgb(255,0,0); ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ലംബ-അലൈൻ: മധ്യം; മാർജിൻ-ഇടത്: 35px; )

ഒരു div ഉള്ളിൽ ഒരു div കേന്ദ്രീകരിക്കാൻ ഞങ്ങൾ ഈ ഉദാഹരണത്തിൽ ഉപയോഗിച്ച css പ്രോപ്പർട്ടികളുടെയും അവയുടെ മൂല്യങ്ങളുടെയും ഒരു ചെറിയ വിവരണം:

• ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക് - ഒരു ബ്ലോക്ക് ഘടകം ഒരു വരിയിലേക്ക് വിന്യസിക്കുകയും അത് മറ്റൊരു ഘടകത്തിന് ചുറ്റും പൊതിയുന്നത് ഉറപ്പാക്കുകയും ചെയ്യുന്നു;
• ലംബമായി വിന്യസിക്കുക: മധ്യം - മാതാപിതാക്കളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ മധ്യഭാഗത്തുള്ള മൂലകത്തെ വിന്യസിക്കുന്നു;
• മാർജിൻ-ഇടത് - ഇടത് മാർജിൻ സജ്ജമാക്കുന്നു.

ഒരു ലെയറിൽ നിന്ന് ഒരു ലിങ്ക് എങ്ങനെ നിർമ്മിക്കാം

എത്ര വിചിത്രമായി തോന്നിയാലും ഇത് സാധ്യമാണ്. ലേഔട്ട് സമയത്ത് ചിലപ്പോൾ ഒരു ഡിവി ബ്ലോക്ക് ആവശ്യമായി വന്നേക്കാം വിവിധ തരംമെനു. നമുക്ക് പരിഗണിക്കാം പ്രായോഗിക ഉദാഹരണംലിങ്ക് ലെയർ നടപ്പിലാക്കൽ:

#layer1(വീതി: 500px; ഉയരം: 100px; പശ്ചാത്തലം: rgb(51,255,204); ബോർഡർ: ഗ്രോവ്; ) a (ഡിസ്‌പ്ലേ: ബ്ലോക്ക്; ടെക്‌സ്‌റ്റ് അലൈൻ: സെൻ്റർ; ഉയരം: 100%; നിറം: rgb(255,0,51) ;) ഞങ്ങളുടെ വെബ്സൈറ്റിലേക്കുള്ള ലിങ്ക്

ഈ ഉദാഹരണത്തിൽ, ലൈൻ ഡിസ്പ്ലേ: ബ്ലോക്ക് ഉപയോഗിച്ച്, ഞങ്ങൾ ലിങ്കിൻ്റെ മൂല്യം സജ്ജമാക്കുന്നു ബ്ലോക്ക് ഘടകം. അങ്ങനെ മുഴുവൻ ഉയരവും ഡിവി ബ്ലോക്ക്ഒരു ലിങ്കായി, സെറ്റ് ഉയരം: 100%.

ബ്ലോക്ക് ഘടകങ്ങൾ മറയ്ക്കുകയും കാണിക്കുകയും ചെയ്യുന്നു

ബ്ലോക്ക് ഘടകങ്ങൾ നൽകുന്നു കൂടുതൽ സാധ്യതകൾകാലഹരണപ്പെട്ട പട്ടിക ലേഔട്ടിനേക്കാൾ ഇൻ്റർഫേസിൻ്റെ പ്രവർത്തനം വിപുലീകരിക്കുന്നതിന്. വെബ്സൈറ്റ് ഡിസൈൻ അദ്വിതീയവും തിരിച്ചറിയാവുന്നതുമാണെന്ന് പലപ്പോഴും സംഭവിക്കുന്നു. എന്നാൽ അത്തരമൊരു എക്സ്ക്ലൂസിവിനായി നിങ്ങൾ സ്വതന്ത്ര സ്ഥലത്തിൻ്റെ അഭാവത്തിൽ പണം നൽകണം.

ഇത് പ്രത്യേകിച്ച് സത്യമാണ് ഹോം പേജ്, പരസ്യത്തിൻ്റെ ചെലവ് ഏറ്റവും ഉയർന്നതാണ്. അതിനാൽ, മറ്റൊന്ന് എവിടെ "തള്ളണം" എന്ന പ്രശ്നം ഉയർന്നുവരുന്നു പരസ്യ ബാനർ. പേജിൻ്റെ മധ്യഭാഗത്തേക്ക് div വിന്യസിക്കുന്നത് ഇവിടെ നിങ്ങൾക്ക് ഒഴിവാക്കാനാവില്ല!

കുറച്ച് ബ്ലോക്ക് മറയ്ക്കുക എന്നതാണ് കൂടുതൽ യുക്തിസഹമായ പരിഹാരം. അത്തരമൊരു നടപ്പാക്കലിൻ്റെ ലളിതമായ ഉദാഹരണം ഇതാ:

#layer1( display:block; width: 500px; ഉയരം: 100px; പശ്ചാത്തലം: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else (layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

ഇതാണ് മാജിക് ബട്ടൺ. അതിൽ ക്ലിക്കുചെയ്യുന്നത് മറയ്ക്കുകയോ മറയ്ക്കുന്ന ബ്ലോക്ക് കാണിക്കുകയോ ചെയ്യും.

ഈ ഉദാഹരണത്തിൽ, ഡിവി ബ്ലോക്കുകളുടെ സ്ഥാനം ഒരു തരത്തിലും മാറില്ല. ഇവിടെ അത് ഉപയോഗിക്കുന്നു ഏറ്റവും ലളിതമായ പ്രവർത്തനം JavaScript മാറ്റുന്ന മൂല്യം css പ്രോപ്പർട്ടികൾബട്ടൺ ക്ലിക്ക് ചെയ്ത ശേഷം പ്രദർശിപ്പിക്കുക (ഇവൻ്റ് ക്ലിക്ക് ചെയ്യുക).

വാക്യഘടന പ്രദർശിപ്പിക്കുക:
ഡിസ്പ്ലേ: ബ്ലോക്ക് | ഇൻലൈൻ | ഇൻലൈൻ-ബ്ലോക്ക് | ഇൻലൈൻ-ടേബിൾ | ലിസ്റ്റ്-ഇനം | ഒന്നുമില്ല | റൺ-ഇൻ | പട്ടിക | പട്ടിക-അടിക്കുറിപ്പ് | പട്ടിക-സെൽ | പട്ടിക-നിര-ഗ്രൂപ്പ് | പട്ടിക-നിര | ടേബിൾ-ഫൂട്ടർ-ഗ്രൂപ്പ് | പട്ടിക-തലക്കെട്ട്-ഗ്രൂപ്പ് | പട്ടിക-വരി | പട്ടിക-വരി-ഗ്രൂപ്പ്

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഈ സ്വത്ത്പല അർത്ഥങ്ങളും എടുക്കാം. അതിനാൽ ഇത് വളരെ ഉപയോഗപ്രദമാണ്, കൂടാതെ മൂലകങ്ങളുടെ സ്ഥാനം നിലനിർത്താൻ ഇത് ഉപയോഗിക്കാം. മുമ്പത്തെ ഉദാഹരണങ്ങളിലൊന്നിൽ, ഒരു div ഉള്ളിൽ ഒരു div കേന്ദ്രീകരിക്കാൻ ഞങ്ങൾ അതിൻ്റെ മൂല്യങ്ങളിലൊന്ന് (ഇൻലൈൻ-ബ്ലോക്ക്) ഉപയോഗിച്ചു.

ഡിസ്പ്ലേ പ്രോപ്പർട്ടിക്ക് ലെയർ മറയ്ക്കാനും കാണിക്കാനും ഞങ്ങൾ രണ്ട് മൂല്യങ്ങൾ ഉപയോഗിച്ചു.

വെബ് ഡിസൈനർമാർ എല്ലാ ദിവസവും അവരുടെ ജോലിയിൽ DIVs ഉപയോഗിക്കുന്നു. ഒരു കുറവും കൂടാതെ, ഇതാണ് ഏറ്റവും ജനപ്രിയമായ ടാഗ്. ഏതെങ്കിലും വെബ്‌സൈറ്റിൻ്റെ ഉറവിടം തുറക്കുക, ഒബ്‌ജക്‌റ്റുകളുടെ മൂന്നിൽ രണ്ട് ഭാഗവും ഉൾപ്പെടുത്തിയിരിക്കുന്നതായി നിങ്ങൾ കാണും. HTML5-ൻ്റെ ആവിർഭാവത്തോടെയും ലേഖനത്തിൻ്റെയോ തലക്കെട്ടിൻ്റെയോ രൂപത്തിൽ ഗുരുതരമായ എതിരാളികളുടെ ആവിർഭാവത്തോടെ പോലും, അത് എല്ലായിടത്തും മാർക്ക്അപ്പിലേക്ക് തിരുകുന്നത് തുടരുന്നു. അതിനാൽ, ഡിവി ബ്ലോക്കുകൾ ഫോർമാറ്റ് ചെയ്യുന്നതിനും കേന്ദ്രീകരിക്കുന്നതിനുമുള്ള പ്രശ്നം മനസിലാക്കാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു.

എന്താണ് DIV

ഡിവിഷൻ എന്ന ഇംഗ്ലീഷ് പദത്തിൽ നിന്നാണ് മൂലകത്തിൻ്റെ പേര് വന്നത്. മാർക്ക്അപ്പ് എഴുതുമ്പോൾ, ഘടകങ്ങളെ ബ്ലോക്കുകളായി തകർക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. DIVs ഒരു വെബ് പേജിൽ ഉള്ളടക്കത്തിൻ്റെ ഗ്രൂപ്പുകൾ ഉൾക്കൊള്ളുന്നു. ഉദാഹരണത്തിന്, ചിത്രങ്ങൾ, ടെക്സ്റ്റ് ഉള്ള ഖണ്ഡികകൾ. ടാഗ് ഉള്ളടക്കത്തിൻ്റെ പ്രദർശനത്തെ ഒരു തരത്തിലും ബാധിക്കില്ല കൂടാതെ സെമാൻ്റിക് ലോഡും വഹിക്കുന്നില്ല.

DIV എല്ലാം പിന്തുണയ്ക്കുന്നു ആഗോള ആട്രിബ്യൂട്ടുകൾ. എന്നാൽ വെബ് ഡിസൈനിനായി നിങ്ങൾക്ക് രണ്ടെണ്ണം മാത്രമേ ആവശ്യമുള്ളൂ - ക്ലാസും ഐഡിയും. വിദേശ കേസുകളിൽ മാത്രമേ നിങ്ങൾ എല്ലാവരേയും കുറിച്ച് ഓർക്കുകയുള്ളൂ, അത് ഒരു വസ്തുതയല്ല. divs മധ്യത്തിലോ ഇടത്തോട്ടോ വിന്യസിക്കാൻ മുമ്പ് ഉപയോഗിച്ചിരുന്ന അലൈൻ ആട്രിബ്യൂട്ട് ഒഴിവാക്കി.

എപ്പോൾ DIVs ഉപയോഗിക്കണം

സൈറ്റ് ഒരു റഫ്രിജറേറ്ററാണെന്നും ഡിവിഡുകൾ പ്ലാസ്റ്റിക് പാത്രങ്ങളാണെന്നും അതിൽ നിങ്ങൾ ഉള്ളടക്കം അടുക്കേണ്ടതുണ്ടെന്നും സങ്കൽപ്പിക്കുക. ലിവർവുർസ്റ്റിനൊപ്പം ഒരേ പാത്രത്തിൽ നിങ്ങൾ പഴങ്ങൾ ഇടുകയില്ല. നിങ്ങൾ ഓരോ തരത്തിലുള്ള ഉൽപ്പന്നങ്ങളും വെവ്വേറെ സ്ഥാപിക്കും. വെബ് ഉള്ളടക്കം സമാനമായ രീതിയിൽ സൃഷ്ടിക്കപ്പെടുന്നു.

ഏതെങ്കിലും വെബ്സൈറ്റ് തുറന്ന് അർത്ഥവത്തായ ബ്ലോക്കുകളായി വിഭജിക്കുക. മുകളിൽ തലക്കെട്ട്, അടിയിൽ അടിക്കുറിപ്പ്, മധ്യഭാഗത്ത് പ്രധാന വാചകം. വശത്ത് സാധാരണയായി ഒരു ചെറിയ കോളം ഉണ്ട് പരസ്യ ഉള്ളടക്കംഅല്ലെങ്കിൽ ടാഗ് ക്ലൗഡ്.

പ്രമാണം

ഇപ്പോൾ ഓരോ വിഭാഗവും കൂടുതൽ വിശദമായി നോക്കുക. തലക്കെട്ട് ഉപയോഗിച്ച് ആരംഭിക്കുക. സൈറ്റ് ഹെഡറിന് പ്രത്യേക ലോഗോ, നാവിഗേഷൻ, ഫസ്റ്റ് ലെവൽ തലക്കെട്ട്, ചിലപ്പോൾ ഒരു മുദ്രാവാക്യം എന്നിവയുണ്ട്. ഓരോ സെമാൻ്റിക് ബ്ലോക്കിനും അതിൻ്റേതായ കണ്ടെയ്നർ നൽകുക. ഇത് ഫ്ലോയിലെ ഘടകങ്ങളെ വേർതിരിക്കുക മാത്രമല്ല, ഫോർമാറ്റ് ചെയ്യുന്നത് എളുപ്പമാക്കുകയും ചെയ്യും. ഒബ്ജക്റ്റ് വിന്യസിക്കുന്നത് നിങ്ങൾക്ക് വളരെ എളുപ്പമായിരിക്കും DIV ടാഗ്മധ്യഭാഗത്ത്, അതിന് ഒരു ക്ലാസ് അല്ലെങ്കിൽ ഐഡൻ്റിഫയർ നൽകുന്നു.

DIV വിന്യാസംഅരികുകൾ ഉപയോഗിച്ച് കേന്ദ്രീകരിച്ചിരിക്കുന്നു

വെബ് ഘടകങ്ങൾ റെൻഡർ ചെയ്യുമ്പോൾ, ബ്രൗസർ മൂന്ന് പ്രോപ്പർട്ടികൾ പരിഗണിക്കുന്നു: പാഡിംഗ്, മാർജിംഗ്, ബോർഡർ. ഉള്ളടക്കത്തിനും അതിൻ്റെ അതിർത്തിക്കും ഇടയിലുള്ള ഇടമാണ് പാഡിംഗ്. മാർജിൻ - ഒരു വസ്തുവിനെ മറ്റൊന്നിൽ നിന്ന് വേർതിരിക്കുന്ന ഫീൽഡുകൾ. ബോർഡർ എന്നത് ബ്ലോക്കുകളോട് ചേർന്നുള്ള വരകളാണ്. അവയ്‌ക്കെല്ലാം ഒരേസമയം അല്ലെങ്കിൽ ഒരു വശത്തേക്ക് മാത്രം അസൈൻ ചെയ്യാൻ കഴിയും:

div(ബോർഡർ: 1px സോളിഡ് #333; ബോർഡർ-ഇടത്: ഒന്നുമില്ല; )

ഈ ഗുണങ്ങൾ ഒബ്‌ജക്‌റ്റുകൾക്കിടയിൽ ഇടം കൂട്ടുകയും അവയുടെ വിന്യാസത്തിനും പ്ലെയ്‌സ്‌മെൻ്റിനും സഹായിക്കുകയും ചെയ്യുന്നു. ശരിയായ രീതിയിൽ. ഉദാഹരണത്തിന്, ഒരു ചിത്രമുള്ള ഒരു ബ്ലോക്ക് ഇടത് അരികിൽ നിന്ന് മധ്യഭാഗത്തേക്ക് 20% ഓഫ്‌സെറ്റ് ചെയ്യണമെങ്കിൽ, നിങ്ങൾ മൂലകത്തിന് 20% മാർജിൻ-ഇടത് മൂല്യം നൽകുന്നു:

Block-with-img (മാർജിൻ-ഇടത്: 20%; )

മൂലകങ്ങൾ അവയുടെ വീതി മൂല്യങ്ങളും നെഗറ്റീവ് പാഡിംഗും ഉപയോഗിച്ച് ഫോർമാറ്റ് ചെയ്യാനും കഴിയും. ഉദാഹരണത്തിന്, 200px 200px അളവുകളുള്ള ഒരു ബ്ലോക്ക് ഉണ്ട്. ആദ്യം ഞങ്ങൾ അവനെ ഏൽപ്പിക്കും കേവല സ്ഥാനനിർണ്ണയംഅതിനെ 50% കേന്ദ്രത്തിലേക്ക് നീക്കുക.

ഡിവി (സ്ഥാനം: കേവലം; ഇടത്: 50%; )

ഇപ്പോൾ, കേന്ദ്രീകൃതമായ DIV കൃത്യമായി സ്ഥാനമുണ്ടെന്ന് ഉറപ്പാക്കാൻ, ഞങ്ങൾ അതിന് ഇടതുവശത്ത് അതിൻ്റെ വീതിയുടെ 50% തുല്യമായ ഒരു നെഗറ്റീവ് മാർജിൻ നൽകുന്നു, അതായത് -100 പിക്സലുകൾ:

മാർജിൻ-ഇടത്: -100px;

CSS-ൽ ഇതിനെ "എയർ നീക്കം" എന്ന് വിളിക്കുന്നു. പക്ഷേ അവനുണ്ട് കാര്യമായ പോരായ്മനിരന്തരമായ കണക്കുകൂട്ടലുകൾ നടത്തേണ്ടതിൻ്റെ ആവശ്യകത, ഇത് നെസ്റ്റിംഗിൻ്റെ നിരവധി തലങ്ങളുള്ള മൂലകങ്ങൾക്ക് ചെയ്യാൻ വളരെ ബുദ്ധിമുട്ടാണ്. വ്യക്തമാക്കിയാൽ പാഡിംഗ് മൂല്യങ്ങൾബോർഡർ വീതിയും, ബ്രൗസർ ഡിഫോൾട്ടായി കണ്ടെയ്‌നറിൻ്റെ അളവുകൾ ബോർഡറുകളുടെ കനത്തിൻ്റെ ആകെത്തുകയായി കണക്കാക്കും, വലത്, ഇടത്, ഉള്ളിലുള്ള ഉള്ളടക്കം എന്നിവ പാഡിംഗ് ചെയ്യുന്നു, ഇത് അതിശയിപ്പിക്കുന്നതും ആകാം.

അതിനാൽ നിങ്ങൾക്ക് ഒരു DIV കേന്ദ്രീകരിക്കേണ്ടിവരുമ്പോൾ, മൂല്യ ബോർഡർ-ബോക്‌സിനൊപ്പം ബോക്‌സ്-സൈസിംഗ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. DIV എലമെൻ്റിൻ്റെ മൊത്തത്തിലുള്ള വീതിയിലേക്ക് പാഡിംഗും ബോർഡർ മൂല്യങ്ങളും ചേർക്കുന്നതിൽ നിന്ന് ഇത് ബ്രൗസറിനെ തടയും. ഒരു ഘടകം ഉയർത്താനോ താഴ്ത്താനോ, നെഗറ്റീവ് മൂല്യങ്ങളും ഉപയോഗിക്കുക. എന്നാൽ ഈ സാഹചര്യത്തിൽ, കണ്ടെയ്നറിൻ്റെ മുകളിലോ താഴെയോ ഉള്ള ഫീൽഡിലേക്ക് അവ നൽകാം.

ഓട്ടോമാറ്റിക് മാർജിനുകൾ ഉപയോഗിച്ച് ഒരു DIV ബ്ലോക്ക് എങ്ങനെ കേന്ദ്രീകരിക്കാം

വലിയ ബ്ലോക്കുകൾ കേന്ദ്രീകരിക്കാനുള്ള എളുപ്പവഴിയാണിത്. നിങ്ങൾ കണ്ടെയ്‌നറിൻ്റെ വീതിയും മാർജിൻ പ്രോപ്പർട്ടിയും സ്വയമേവ നിയോഗിക്കുക. ബ്രൗസർ ഇടത്തും വലത്തും തുല്യ മാർജിനുകളുള്ള മധ്യത്തിൽ ഒരു ബ്ലോക്ക് സ്ഥാപിക്കും, എല്ലാ ജോലികളും സ്വയം ചെയ്യുന്നു. തൽഫലമായി, നിങ്ങൾ ആശയക്കുഴപ്പത്തിലാകാൻ സാധ്യതയില്ല ഗണിതശാസ്ത്ര കണക്കുകൂട്ടലുകൾനിങ്ങളുടെ സമയം ഗണ്യമായി ലാഭിക്കുകയും ചെയ്യുന്നു.

ഉപയോഗിച്ച് രീതി ഉപയോഗിക്കുക ഓട്ടോമാറ്റിക് ഫീൽഡുകൾഅഡാപ്റ്റീവ് ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുമ്പോൾ. കണ്ടെയ്‌നറിന് എമ്മിലോ ശതമാനത്തിലോ വീതി മൂല്യം നൽകുക എന്നതാണ് പ്രധാന കാര്യം. മുകളിലെ ഉദാഹരണ കോഡ് ഉൾപ്പെടെ, ഏത് ഉപകരണത്തിലും DIV കേന്ദ്രീകരിക്കും മൊബൈൽ ഫോണുകൾ, ഇത് സ്ക്രീനിൻ്റെ 90% ഉൾക്കൊള്ളും.

ഡിസ്പ്ലേ പ്രോപ്പർട്ടി വഴിയുള്ള വിന്യാസം: ഇൻലൈൻ-ബ്ലോക്ക്

സ്ഥിരസ്ഥിതി DIV ഘടകങ്ങൾബ്ലോക്ക് അധിഷ്ഠിതമായി കണക്കാക്കപ്പെടുന്നു, അവയുടെ പ്രദർശന മൂല്യം ബ്ലോക്ക് ആണ്. ഈ രീതിക്ക് നിങ്ങൾ ഈ പ്രോപ്പർട്ടി അസാധുവാക്കേണ്ടതുണ്ട്. പാരൻ്റ് കണ്ടെയ്‌നറുള്ള DIV-കൾക്ക് മാത്രം അനുയോജ്യം:

ഏതെങ്കിലും വാചകം

ബാഹ്യ-ഡിവ് ക്ലാസുള്ള ഒരു ഘടകത്തിന്, ഉള്ളിലെ ടെക്‌സ്‌റ്റിനെ കേന്ദ്രീകരിക്കുന്ന കേന്ദ്രത്തിൻ്റെ മൂല്യമുള്ള ഒരു ടെക്‌സ്‌റ്റ്-അലൈൻ പ്രോപ്പർട്ടി അസൈൻ ചെയ്‌തിരിക്കുന്നു. എന്നാൽ ഇപ്പോൾ ബ്രൗസർ നെസ്റ്റഡ് DIV ഒരു ബ്ലോക്ക് ഒബ്‌ജക്‌റ്റായി കാണുന്നു. ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി പ്രവർത്തിക്കുന്നതിന്, അകത്തെ-ഡിവ് ചെറിയക്ഷരമായി കണക്കാക്കണം. അതിനാൽ, ഇൻ CSS പട്ടികഅകത്തെ ഡിവി സെലക്ടറിനായി നിങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് എഴുതുക:

Inner-div( display: inline-block; )

നിങ്ങൾ ഡിസ്പ്ലേ പ്രോപ്പർട്ടി ബ്ലോക്കിൽ നിന്ന് ഇൻലൈൻ ബ്ലോക്കിലേക്ക് മാറ്റുന്നു.

രൂപാന്തരം/വിവർത്തന രീതി

കാസ്‌കേഡിംഗ് സ്‌റ്റൈൽ ഷീറ്റുകൾ വെബ് ഘടകങ്ങളെ ഇഷ്ടാനുസരണം നീക്കാനും വളച്ചൊടിക്കാനും തിരിക്കാനും മറ്റുവിധത്തിൽ പരിവർത്തനം ചെയ്യാനും സാധ്യമാക്കുന്നു. ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി ഇതിനായി ഉപയോഗിക്കുന്നു. മൂല്യങ്ങൾ ആവശ്യമുള്ള പരിവർത്തന തരവും ഡിഗ്രിയും സൂചിപ്പിക്കുന്നു. ഈ ഉദാഹരണത്തിൽ ഞങ്ങൾ വിവർത്തനം ഉപയോഗിച്ച് പ്രവർത്തിക്കും:

രൂപാന്തരപ്പെടുത്തുക: വിവർത്തനം ചെയ്യുക(50%, 50%);

വിവർത്തനം ഫംഗ്‌ഷൻ ഒരു ഘടകത്തെ അതിൻ്റെ നിലവിലെ സ്ഥാനത്ത് നിന്ന് ഇടത്/വലത്, മുകളിലേക്ക്/താഴേക്ക് നീക്കുന്നു. രണ്ട് മൂല്യങ്ങൾ ബ്രാക്കറ്റുകളിൽ കടന്നുപോകുന്നു:

• തിരശ്ചീന ചലനത്തിൻ്റെ ബിരുദം;
• ലംബമായ ചലനത്തിൻ്റെ ബിരുദം.

കോർഡിനേറ്റ് അക്ഷങ്ങളിൽ ഒന്നിലൂടെ മാത്രം ഒരു ഘടകം നീക്കണമെങ്കിൽ, വിവർത്തനം എന്ന വാക്കിന് ശേഷം നിങ്ങൾ അക്ഷത്തിൻ്റെ പേരും പരാൻതീസിസിൽ ആവശ്യമായ സ്ഥാനചലനത്തിൻ്റെ അളവും സൂചിപ്പിക്കുന്നു:

രൂപാന്തരപ്പെടുത്തുക: translateY(-20%);

ചില മാനുവലുകളിൽ വെണ്ടർ പ്രിഫിക്സുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് രൂപമാറ്റം കണ്ടെത്താം:

Webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); രൂപാന്തരപ്പെടുത്തുക: വിവർത്തനം ചെയ്യുക(50%, 50%);

2018-ൽ, ഇത് ഇനി ആവശ്യമില്ല; എഡ്ജും ഐഇയും ഉൾപ്പെടെ എല്ലാ ബ്രൗസറുകളും ഈ പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നു.

ഞങ്ങൾക്ക് ആവശ്യമുള്ള DIV കേന്ദ്രീകരിക്കുന്നതിന്, CSS വിവർത്തന പ്രവർത്തനം ലംബവും തിരശ്ചീനവുമായ അച്ചുതണ്ടിന് 50% മൂല്യത്തിൽ എഴുതിയിരിക്കുന്നു. ബ്രൗസറിനെ അതിൻ്റെ നിലവിലെ സ്ഥാനത്ത് നിന്ന് അതിൻ്റെ വീതിയും ഉയരവും പകുതിയായി ഓഫ്‌സെറ്റ് ചെയ്യാൻ ഇത് ഇടയാക്കും. വീതിയും ഉയരവും ഉള്ള സവിശേഷതകൾ വ്യക്തമാക്കണം:

പ്രമാണം .nav-bar( ഡിസ്പ്ലേ: ബ്ലോക്ക്; വീതി: 90%; ഉയരം: 100vh; മാർജിൻ: 0 ഓട്ടോ; പശ്ചാത്തലം: ലീനിയർ-ഗ്രേഡിയൻ്റ്(ഇടത്തോട്ട്, ചുവപ്പ്, #f06d06); .നാവിഗേഷൻ(വീതി: 50%; ഉയരം: 50% വർണ്ണം: #FFF;

ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി പ്രയോഗിക്കുന്ന മൂലകം ചുറ്റുമുള്ള വസ്തുക്കളിൽ നിന്ന് സ്വതന്ത്രമായി നീങ്ങുന്നുവെന്ന് ഓർമ്മിക്കുക. ഒരു വശത്ത്, ഇത് സൗകര്യപ്രദമാണ്, എന്നാൽ ചിലപ്പോൾ നീക്കുമ്പോൾ, DIV മറ്റൊരു കണ്ടെയ്നർ ഓവർലാപ്പ് ചെയ്യാം. അതിനാൽ, വെബ് ഘടകങ്ങളെ കേന്ദ്രീകരിക്കുന്ന ഈ രീതി നിലവാരമില്ലാത്തതായി കണക്കാക്കുകയും അത്യന്താപേക്ഷിതമായ സന്ദർഭങ്ങളിൽ മാത്രം ഉപയോഗിക്കുകയും ചെയ്യുന്നു. എല്ലാ CSS കാനോനുകൾക്കനുസരിച്ചുള്ള പരിവർത്തനങ്ങൾ ആനിമേഷനായി ഉപയോഗിക്കുന്നു.

ഫ്ലെക്സ്ബോക്സ് ലേഔട്ടിൽ പ്രവർത്തിക്കുന്നു

വെബ് ലേഔട്ടുകൾ രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള ഒരു സങ്കീർണ്ണമായ മാർഗമായി ഫ്ലെക്സ്ബോക്സ് കണക്കാക്കപ്പെടുന്നു. എന്നാൽ നിങ്ങൾ അതിൽ പ്രാവീണ്യം നേടിയാൽ, അത് വളരെ ലളിതവും ആസ്വാദ്യകരവുമാണെന്ന് നിങ്ങൾ മനസ്സിലാക്കും സ്റ്റാൻഡേർഡ് വഴികൾഫോർമാറ്റിംഗ്. ഫ്ലെക്സ്ബോക്സ് സ്പെസിഫിക്കേഷൻ വഴക്കമുള്ളതും അവിശ്വസനീയവുമാണ് ശക്തമായ വഴിഘടകം പ്രോസസ്സിംഗ്. കൂടെ ഇംഗ്ലീഷ് ഭാഷമൊഡ്യൂളിൻ്റെ പേര് "ഫ്ലെക്സിബിൾ കണ്ടെയ്നർ" എന്ന് വിവർത്തനം ചെയ്തിട്ടുണ്ട്. ഇൻഡൻ്റുകളും മാർജിനുകളും കണക്കാക്കാതെ മൂലകങ്ങളുടെ വീതി, ഉയരം, ക്രമീകരണം എന്നിവയുടെ മൂല്യങ്ങൾ യാന്ത്രികമായി ക്രമീകരിക്കുന്നു.

മുമ്പത്തെ ഉദാഹരണങ്ങളിൽ, ഞങ്ങൾ ഇതിനകം തന്നെ ഡിസ്പ്ലേ പ്രോപ്പർട്ടിയുമായി പ്രവർത്തിച്ചിട്ടുണ്ട്, എന്നാൽ ഞങ്ങൾ അതിനെ തടയുന്നതിനും ഇൻലൈൻ-ബ്ലോക്ക് മൂല്യങ്ങൾക്കുമായി സജ്ജമാക്കി. ഫ്ലെക്സ് ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ ഞങ്ങൾ ഡിസ്പ്ലേ ഉപയോഗിക്കും: flex. ആദ്യം നമുക്ക് ഒരു ഫ്ലെക്സ് കണ്ടെയ്നർ ആവശ്യമാണ്:

കാസ്കേഡിംഗ് ടേബിളുകളിൽ ഒരു ഫ്ലെക്സ് കണ്ടെയ്നറിലേക്ക് പരിവർത്തനം ചെയ്യാൻ, ഞങ്ങൾ എഴുതുന്നു:

ഫ്ലെക്സ് കണ്ടെയ്നർ (പ്രദർശനം: ഫ്ലെക്സ്;)

എല്ലാ നെസ്റ്റഡ് വസ്തുക്കളും, എന്നാൽ നേരിട്ടുള്ള പിൻഗാമികൾ മാത്രം, ഫ്ലെക്സ് ഘടകങ്ങളായിരിക്കും:

ആദ്യത്തേത് രണ്ടാമത്തേത് മൂന്നാമത്തേത് നാലാമത്തേത്

നിങ്ങൾ ഒരു ഫ്ലെക്സ് കണ്ടെയ്‌നറിനുള്ളിൽ ഒരു ലിസ്റ്റ് സ്ഥാപിക്കുകയാണെങ്കിൽ, ലി ലിസ്റ്റ് ഇനങ്ങൾ ഫ്ലെക്സ് ഘടകങ്ങളായി കണക്കാക്കില്ല. Flexbox ലേഔട്ട് ഇനിപ്പറയുന്നതിൽ മാത്രമേ പ്രവർത്തിക്കൂ:

ഫ്ലെക്സ് ഘടകങ്ങൾ സ്ഥാപിക്കുന്നതിനുള്ള നിയമങ്ങൾ

ഫ്ലെക്സ് ഇനങ്ങൾ മാനേജ് ചെയ്യാൻ, നിങ്ങൾക്ക് ജസ്റ്റിഫൈ-ഉള്ളടക്കം, അലൈൻ-ഇനങ്ങൾ ആവശ്യമാണ്. ഇതിനെ ആശ്രയിച്ച് നിർദ്ദിഷ്ട മൂല്യങ്ങൾ, ഈ രണ്ട് പ്രോപ്പർട്ടികൾ ആവശ്യാനുസരണം ഒബ്ജക്റ്റുകൾ സ്വയമേവ സ്ഥാപിക്കുന്നു. എല്ലാ നെസ്റ്റഡ് DIV-കളും കേന്ദ്രീകരിക്കണമെങ്കിൽ, ഞങ്ങൾ ജസ്റ്റിഫൈ-ഉള്ളടക്കം എഴുതുന്നു: മധ്യഭാഗം, അലൈൻ-ഇനങ്ങൾ: കേന്ദ്രം കൂടാതെ മറ്റൊന്നും. ബ്രൗസർ ബാക്കി ജോലികൾ സ്വയം ചെയ്യും:

പ്രമാണം .flex-container( display: flex; justify-content: centre; align-items: centre; ) First Second Third Forth

ഫ്ലെക്‌സ് ഇനങ്ങളായ DIV-കളിൽ ടെക്‌സ്‌റ്റ് കേന്ദ്രീകരിക്കാൻ, നിങ്ങൾക്ക് സാധാരണ ടെക്‌സ്‌റ്റ് അലൈൻ ടെക്‌നിക് ഉപയോഗിക്കാം. അല്ലെങ്കിൽ നിങ്ങൾക്ക് ഓരോ നെസ്റ്റഡ് ഡിഐവിയും ഒരു ഫ്ലെക്സ് കണ്ടെയ്നർ ആക്കാനും ജസ്റ്റിഫൈ-ഉള്ളടക്കം ഉപയോഗിച്ച് ഉള്ളടക്കം നിയന്ത്രിക്കാനും കഴിയും. ഗ്രാഫിക്‌സ്, മൾട്ടി ലെവൽ ലിസ്റ്റുകൾ ഉൾപ്പെടെയുള്ള മറ്റ് നെസ്റ്റഡ് ഒബ്‌ജക്‌റ്റുകൾ എന്നിവയുൾപ്പെടെ വൈവിധ്യമാർന്ന ഉള്ളടക്കം അടങ്ങിയിട്ടുണ്ടെങ്കിൽ ഈ രീതി കൂടുതൽ യുക്തിസഹമാണ്.