CSS ഉപയോഗിച്ച് ഒരു

Alice Dupont

2024, ജൂലൈ 13, ശനിയാഴ്‌ച 9:50:36 PM

CSS ഉള്ള ഒരു ഡിവിയുടെ ഉള്ളിൽ വാചകം ലംബമായി കേന്ദ്രീകരിക്കുക

ഒരു ഡിവിയിൽ വാചകം ലംബമായി വിന്യസിക്കുന്നത് വെബ് ഡിസൈനിൽ ഒരു സാധാരണ വെല്ലുവിളിയാണ്. വാചകം തികച്ചും കേന്ദ്രീകൃതമാണെന്ന് ഉറപ്പാക്കുന്നത് നിങ്ങളുടെ ഉള്ളടക്കത്തിൻ്റെ സൗന്ദര്യശാസ്ത്രവും വായനാക്ഷമതയും മെച്ചപ്പെടുത്തും.

ഈ ലേഖനത്തിൽ, CSS ഉപയോഗിച്ച് ഒരു ഡിവിയിൽ ടെക്‌സ്‌റ്റിൻ്റെ ലംബ കേന്ദ്രീകരണം നേടുന്നതിനുള്ള വിവിധ രീതികൾ ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും. വ്യത്യസ്‌ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലുടനീളവും അനുയോജ്യത ഉറപ്പാക്കാൻ ഞങ്ങൾ ഒരു ലളിതമായ ഉദാഹരണത്തിലൂടെ ആരംഭിക്കുകയും തുടർന്ന് കൂടുതൽ നൂതനമായ സാങ്കേതിക വിദ്യകൾ പരിശോധിക്കുകയും ചെയ്യും.

കമാൻഡ്	വിവരണം
display: flex;	ഒരു ഫ്ലെക്സ് കണ്ടെയ്നർ നിർവചിക്കുന്നു, ഫ്ലെക്സ്ബോക്സ് ലേഔട്ടിൻ്റെ ഉപയോഗം സാധ്യമാക്കുന്നു.
justify-content: center;	ഫ്ലെക്സ് കണ്ടെയ്നറിനുള്ളിൽ ഫ്ലെക്സ് ഇനങ്ങൾ തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുന്നു.
align-items: center;	ഫ്ലെക്സ് കണ്ടെയ്നറിനുള്ളിൽ ഫ്ലെക്സ് ഇനങ്ങൾ ലംബമായി കേന്ദ്രീകരിക്കുന്നു.
display: grid;	ഗ്രിഡ് ലേഔട്ടിൻ്റെ ഉപയോഗം പ്രവർത്തനക്ഷമമാക്കുന്ന ഒരു ഗ്രിഡ് കണ്ടെയ്‌നർ നിർവചിക്കുന്നു.
place-items: center;	ഒരു ഗ്രിഡ് കണ്ടെയ്‌നറിനുള്ളിൽ ഇനങ്ങൾ തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിക്കുന്നു.
display: table;	ടേബിൾ ലേഔട്ട് പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കാൻ അനുവദിക്കുന്ന ഒരു ഘടകത്തെ ഒരു പട്ടികയായി നിർവചിക്കുന്നു.
display: table-cell;	ഒരു ഘടകത്തെ ഒരു ടേബിൾ സെല്ലായി നിർവചിക്കുന്നു, ഇത് ലംബമായ വിന്യാസ സവിശേഷതകൾ പ്രാപ്തമാക്കുന്നു.
vertical-align: middle;	ഒരു പട്ടിക-സെൽ ഘടകത്തിനുള്ളിൽ ഉള്ളടക്കം ലംബമായി കേന്ദ്രീകരിക്കുന്നു.
line-height: 170px;	കണ്ടെയ്‌നറിൻ്റെ ഉയരത്തിന് തുല്യമായ ലൈൻ ഉയരം ലംബമായി മധ്യഭാഗത്തായി സജ്ജീകരിക്കുന്നു.

CSS ഉപയോഗിച്ച് വാചകം ലംബമായി കേന്ദ്രീകരിക്കുന്നതിനുള്ള സാങ്കേതികതകൾ

ആദ്യ സ്ക്രിപ്റ്റ് ഉദാഹരണത്തിൽ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു display: flex; ഒരു ഫ്ലെക്സ് കണ്ടെയ്നർ നിർവചിക്കാൻ. ഇത് ഫ്ലെക്സ്ബോക്സ് ലേഔട്ട് പ്രോപ്പർട്ടികളുടെ ഉപയോഗം സാധ്യമാക്കുന്നു. ക്രമീകരണം വഴി justify-content: center; ഒപ്പം align-items: center;, ഉള്ളിലെ വാചകം നമുക്ക് തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിക്കാം

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

രണ്ടാമത്തെ സ്ക്രിപ്റ്റ് ഉദാഹരണം ഉപയോഗിച്ച് CSS ഗ്രിഡ് ലേഔട്ട് ഉപയോഗിക്കുന്നു display: grid;. ക്രമീകരണം വഴി place-items: center;, ഗ്രിഡ് കണ്ടെയ്‌നറിനുള്ളിൽ വാചകം തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിച്ചിരിക്കുന്നു. CSS ഗ്രിഡ് പരമ്പരാഗത രീതികളെ അപേക്ഷിച്ച് വെബ് ലേഔട്ടുകൾ രൂപകൽപ്പന ചെയ്യുന്നതിനായി കൂടുതൽ ശക്തവും വഴക്കമുള്ളതുമായ സിസ്റ്റം വാഗ്ദാനം ചെയ്യുന്നു. സങ്കീർണ്ണവും പ്രതികരിക്കുന്നതുമായ ഡിസൈനുകൾ എളുപ്പത്തിൽ സൃഷ്ടിക്കാനുള്ള കഴിവ് ഇത് നൽകുന്നു. ദി place-items: center; ലംബവും തിരശ്ചീനവുമായ കേന്ദ്രീകരണം നേടുന്നതിനും കോഡ് ലളിതമാക്കുന്നതിനും വായനാക്ഷമത മെച്ചപ്പെടുത്തുന്നതിനുമുള്ള ഒരു സംക്ഷിപ്ത മാർഗമാണ് കമാൻഡ്.

ലംബമായ കേന്ദ്രീകരണത്തിനുള്ള വിപുലമായ CSS ടെക്നിക്കുകൾ

മൂന്നാമത്തെ സ്ക്രിപ്റ്റിൽ, ഞങ്ങൾ ടേബിൾ ഡിസ്പ്ലേ രീതി ഉപയോഗിക്കുന്നു. ക്രമീകരണം display: table; കണ്ടെയ്നറിൽ ഒപ്പം display: table-cell; ഉപയോഗിച്ച് സൃഷ്ടിച്ച ഒരു കപട ഘടകത്തിൽ ::before ഉപയോഗിക്കാൻ ഞങ്ങളെ അനുവദിക്കുന്നു vertical-align: middle; സ്വത്ത്. ഈ രീതി പട്ടിക സെല്ലുകളുടെ സ്വഭാവത്തെ അനുകരിക്കുന്നു, ഇത് ലംബമായി ഉള്ളടക്കം കേന്ദ്രീകരിക്കുന്നത് സാധ്യമാക്കുന്നു. ആധുനിക വെബ് ഡിസൈനിൽ ഈ സമീപനം സാധാരണയായി ഉപയോഗിക്കുന്നില്ലെങ്കിലും, പഴയ ബ്രൗസറുകളുമായുള്ള അനുയോജ്യത നിലനിർത്തുന്നതിനോ ലെഗസി കോഡ് കൈകാര്യം ചെയ്യുന്നതിനോ ഇത് ഉപയോഗപ്രദമാകും. പുതിയ ലേഔട്ട് സിസ്റ്റങ്ങളെ ആശ്രയിക്കാതെ ഉള്ളടക്കം കേന്ദ്രീകരിക്കുന്നതിനുള്ള വിശ്വസനീയമായ മാർഗം ഇത് നൽകുന്നു.

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

ലംബ കേന്ദ്രീകരണത്തിനായി ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിക്കുന്നു

CSS ഫ്ലെക്സ്ബോക്സ്

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

ലംബ കേന്ദ്രീകരണത്തിനായി ഗ്രിഡ് ഉപയോഗിക്കുന്നു

CSS ഗ്രിഡ്

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

ലംബ കേന്ദ്രീകരണത്തിനായി ടേബിൾ ഡിസ്പ്ലേ ഉപയോഗിക്കുന്നു

CSS ടേബിൾ ഡിസ്പ്ലേ

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

ലംബ കേന്ദ്രീകരണത്തിനായി ലൈൻ ഉയരം ഉപയോഗിക്കുന്നു

CSS ലൈൻ ഉയരം

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

ലംബ കേന്ദ്രീകരണത്തിനായി CSS പരിവർത്തനം പര്യവേക്ഷണം ചെയ്യുന്നു

a ഉള്ളിൽ വാചകം ലംബമായി കേന്ദ്രീകരിക്കുന്നതിനുള്ള മറ്റൊരു ഫലപ്രദമായ രീതി div CSS ഉപയോഗിക്കുന്നു transform സ്വത്ത്. സംയോജിപ്പിച്ചുകൊണ്ട് position: absolute; കൂടെ transform: translateY(-50%);, നമുക്ക് കൃത്യമായ ലംബ വിന്യാസം നേടാം. ആദ്യം, ദി div ആയി സജ്ജീകരിച്ചിരിക്കുന്നു position: relative; ഒരു റഫറൻസ് പോയിൻ്റായി പ്രവർത്തിക്കാൻ. പിന്നെ, കൂടെ ഒരു കുട്ടി ഘടകം position: absolute; പാരൻ്റ് കണ്ടെയ്‌നറിൻ്റെ മുകളിൽ 50% സ്ഥാനത്താണ്. ഒടുവിൽ, അപേക്ഷിക്കുന്നു transform: translateY(-50%); മൂലകത്തെ അതിൻ്റെ ഉയരത്തിൻ്റെ പകുതി മുകളിലേക്ക് നീക്കുന്നു, അതിനെ ലംബമായി കേന്ദ്രീകരിക്കുന്നു.

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

CSS-ലെ ലംബ കേന്ദ്രീകരണത്തെക്കുറിച്ചുള്ള പൊതുവായ ചോദ്യങ്ങൾ

ഒരു ഡിവിയിൽ ടെക്‌സ്‌റ്റ് ലംബമായി മധ്യത്തിലാക്കാനുള്ള എളുപ്പവഴി ഏതാണ്?
ഉപയോഗിക്കുന്നത് display: flex; കൂടെ justify-content: center; ഒപ്പം align-items: center; പലപ്പോഴും ഏറ്റവും എളുപ്പവും ഫലപ്രദവുമായ രീതിയാണ്.
എങ്ങനെയാണ് പഴയ ബ്രൗസറുകളിൽ ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കുന്നത്?
ടേബിൾ ഡിസ്പ്ലേ രീതി ഉപയോഗിച്ച് display: table; ഒപ്പം vertical-align: middle; പഴയ ബ്രൗസറുകളിൽ ലംബമായ കേന്ദ്രീകരണം നേടാൻ സഹായിക്കും.
വാചകം ലംബമായി കേന്ദ്രീകരിക്കാൻ CSS ഗ്രിഡ് ഉപയോഗിക്കാമോ?
അതെ, CSS ഗ്രിഡിന് ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കാൻ കഴിയും display: grid; ഒപ്പം place-items: center;.
മൾട്ടി-ലൈൻ ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കാൻ കഴിയുമോ?
അതെ, Flexbox അല്ലെങ്കിൽ CSS ഗ്രിഡ് ഉപയോഗിച്ച് ഒരു കണ്ടെയ്‌നറിനുള്ളിൽ മൾട്ടി-ലൈൻ ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കാൻ കഴിയും.
അറിയപ്പെടുന്ന കണ്ടെയ്‌നർ ഉയരമുള്ള ടെക്‌സ്‌റ്റിനെ എങ്ങനെ ലംബമായി മധ്യത്തിലാക്കും?
നിങ്ങൾക്ക് സജ്ജമാക്കാൻ കഴിയും line-height കണ്ടെയ്‌നറിൻ്റെ ഉയരവുമായി പൊരുത്തപ്പെടുന്ന പ്രോപ്പർട്ടി, വാചകത്തെ ഫലപ്രദമായി കേന്ദ്രീകരിക്കുന്നു.
കണ്ടെയ്നർ ഉയരം ഡൈനാമിക് ആണെങ്കിലോ?
Flexbox, Grid അല്ലെങ്കിൽ The transform ചലനാത്മകമായ കണ്ടെയ്‌നർ ഉയരത്തിൽ പോലും സ്ഥിരമായ ലംബ കേന്ദ്രീകരണം പ്രോപ്പർട്ടി ഉറപ്പാക്കുന്നു.
ഉപയോഗിക്കുന്നതിന് എന്തെങ്കിലും പോരായ്മകൾ ഉണ്ടോ transform: translateY(-50%);?
ഫലപ്രദമാണെങ്കിലും, അത് രക്ഷിതാവിന് ആവശ്യമാണ് position: relative; ഫ്ലെക്‌സ്‌ബോക്‌സിനോ ഗ്രിഡിനോ താരതമ്യപ്പെടുത്തുമ്പോൾ നടപ്പിലാക്കാൻ അൽപ്പം കൂടുതൽ സങ്കീർണ്ണമായേക്കാം.
ഒരു റെസ്‌പോൺസീവ് ഡിസൈനിൽ നിങ്ങൾ എങ്ങനെയാണ് വാചകം ലംബമായി കേന്ദ്രീകരിക്കുന്നത്?
വ്യത്യസ്‌ത സ്‌ക്രീൻ വലുപ്പങ്ങളോടും ഓറിയൻ്റേഷനുകളോടും നന്നായി പൊരുത്തപ്പെടുന്നതിനാൽ, പ്രതികരിക്കുന്ന ഡിസൈനുകൾക്ക് Flexbox അല്ലെങ്കിൽ CSS ഗ്രിഡ് ഉപയോഗിക്കുന്നത് വളരെ ശുപാർശ ചെയ്യുന്നു.

ലംബ കേന്ദ്രീകരണത്തെക്കുറിച്ചുള്ള അന്തിമ ചിന്തകൾ

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

CSS ഉപയോഗിച്ച് ഒരു ഡിവിയിൽ വാചകം ലംബമായി കേന്ദ്രീകരിക്കുന്നു