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

രണ്ടാമത്തെ സ്ക്രിപ്റ്റ് ഉദാഹരണം ഉപയോഗിച്ച് CSS ഗ്രിഡ് ലേഔട്ട് ഉപയോഗിക്കുന്നു . ക്രമീകരണം വഴി , ഗ്രിഡ് കണ്ടെയ്‌നറിനുള്ളിൽ വാചകം തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിച്ചിരിക്കുന്നു. 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>

#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>

#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>

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

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

1. ഒരു ഡിവിയിൽ ടെക്‌സ്‌റ്റ് ലംബമായി മധ്യത്തിലാക്കാനുള്ള എളുപ്പവഴി ഏതാണ്?
2. ഉപയോഗിക്കുന്നത് കൂടെ ഒപ്പം പലപ്പോഴും ഏറ്റവും എളുപ്പവും ഫലപ്രദവുമായ രീതിയാണ്.
3. എങ്ങനെയാണ് പഴയ ബ്രൗസറുകളിൽ ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കുന്നത്?
4. ടേബിൾ ഡിസ്പ്ലേ രീതി ഉപയോഗിച്ച് ഒപ്പം പഴയ ബ്രൗസറുകളിൽ ലംബമായ കേന്ദ്രീകരണം നേടാൻ സഹായിക്കും.
5. വാചകം ലംബമായി കേന്ദ്രീകരിക്കാൻ CSS ഗ്രിഡ് ഉപയോഗിക്കാമോ?
6. അതെ, CSS ഗ്രിഡിന് ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കാൻ കഴിയും ഒപ്പം .
7. മൾട്ടി-ലൈൻ ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കാൻ കഴിയുമോ?
8. അതെ, Flexbox അല്ലെങ്കിൽ CSS ഗ്രിഡ് ഉപയോഗിച്ച് ഒരു കണ്ടെയ്‌നറിനുള്ളിൽ മൾട്ടി-ലൈൻ ടെക്‌സ്‌റ്റ് ലംബമായി കേന്ദ്രീകരിക്കാൻ കഴിയും.
9. അറിയപ്പെടുന്ന കണ്ടെയ്‌നർ ഉയരമുള്ള ടെക്‌സ്‌റ്റിനെ എങ്ങനെ ലംബമായി മധ്യത്തിലാക്കും?
10. നിങ്ങൾക്ക് സജ്ജമാക്കാൻ കഴിയും കണ്ടെയ്‌നറിൻ്റെ ഉയരവുമായി പൊരുത്തപ്പെടുന്ന പ്രോപ്പർട്ടി, വാചകത്തെ ഫലപ്രദമായി കേന്ദ്രീകരിക്കുന്നു.
11. കണ്ടെയ്നർ ഉയരം ഡൈനാമിക് ആണെങ്കിലോ?
12. Flexbox, Grid അല്ലെങ്കിൽ The ചലനാത്മകമായ കണ്ടെയ്‌നർ ഉയരത്തിൽ പോലും സ്ഥിരമായ ലംബ കേന്ദ്രീകരണം പ്രോപ്പർട്ടി ഉറപ്പാക്കുന്നു.
13. ഉപയോഗിക്കുന്നതിന് എന്തെങ്കിലും പോരായ്മകൾ ഉണ്ടോ ?
14. ഫലപ്രദമാണെങ്കിലും, അത് രക്ഷിതാവിന് ആവശ്യമാണ് ഫ്ലെക്‌സ്‌ബോക്‌സിനോ ഗ്രിഡിനോ താരതമ്യപ്പെടുത്തുമ്പോൾ നടപ്പിലാക്കാൻ അൽപ്പം കൂടുതൽ സങ്കീർണ്ണമായേക്കാം.
15. ഒരു റെസ്‌പോൺസീവ് ഡിസൈനിൽ നിങ്ങൾ എങ്ങനെയാണ് വാചകം ലംബമായി കേന്ദ്രീകരിക്കുന്നത്?
16. വ്യത്യസ്‌ത സ്‌ക്രീൻ വലുപ്പങ്ങളോടും ഓറിയൻ്റേഷനുകളോടും നന്നായി പൊരുത്തപ്പെടുന്നതിനാൽ, പ്രതികരിക്കുന്ന ഡിസൈനുകൾക്ക് Flexbox അല്ലെങ്കിൽ CSS ഗ്രിഡ് ഉപയോഗിക്കുന്നത് വളരെ ശുപാർശ ചെയ്യുന്നു.

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