à´à´ªà´¯àµà´à´¿à´àµà´àµà´ margin: auto; à´à´¥à´µà´¾ position: absolute; à´àµà´àµ transform: translate(-50%, -50%);

à´à´ªà´¯àµà´à´¿à´àµà´àµà´ display: flex; à´àµà´àµ justify-content: center; à´à´ªàµà´ªà´ align-items: center;

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

Mia Chevalier

2024, ജൂൺ 16, ഞായറാഴ്‌ച 2:24:28 AM

CSS-നൊപ്പം ഡിവി അലൈൻമെൻ്റ് മാസ്റ്ററിംഗ്

CSS-ൽ ഘടകങ്ങൾ തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുന്നത് വെബ് ഡെവലപ്പർമാർ നേരിടുന്ന ഒരു സാധാരണ ജോലിയാണ്. അത് ഒരു ബട്ടണും ചിത്രവും അല്ലെങ്കിൽ ഒരു ഡിവിയും വിന്യസിക്കുകയാണെങ്കിലും, പൂർണ്ണമായ വിന്യാസം കൈവരിക്കുന്നത് ചിലപ്പോൾ ബുദ്ധിമുട്ടായിരിക്കും. ഈ ഗൈഡിൽ, a തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുന്നതിനുള്ള വിവിധ രീതികൾ ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും

മറ്റൊന്നിനുള്ളിൽ

CSS ഉപയോഗിക്കുന്നു.

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

കമാൻഡ്	വിവരണം
display: flex;	ഒരു ഫ്ലെക്സ് കണ്ടെയ്നർ നിർവചിക്കുകയും ഫ്ലെക്സ്ബോക്സ് ലേഔട്ട് പ്രവർത്തനക്ഷമമാക്കുകയും ചെയ്യുന്നു.
justify-content: center;	ഒരു ഫ്ലെക്സ് കണ്ടെയ്നറിനുള്ളിൽ ഇനങ്ങൾ തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുന്നു.
align-items: center;	ഒരു ഫ്ലെക്സ് കണ്ടെയ്നറിനുള്ളിൽ ഇനങ്ങൾ ലംബമായി കേന്ദ്രീകരിക്കുന്നു.
place-items: center;	ഒരു ഗ്രിഡ് കണ്ടെയ്‌നറിൽ ഇനങ്ങൾ തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിക്കുന്നു.
transform: translate(-50%, -50%);	ഒരു മൂലകത്തെ അതിൻ്റെ വീതിയുടെയും ഉയരത്തിൻ്റെയും 50% കേന്ദ്രത്തിലേക്ക് മാറ്റുന്നു.
position: absolute;	ഒരു മൂലകത്തെ അതിൻ്റെ ഏറ്റവും അടുത്ത സ്ഥാനമുള്ള പൂർവ്വികനുമായി താരതമ്യപ്പെടുത്തുന്നു.
top: 50%;	ഒരു മൂലകത്തെ അതിൽ അടങ്ങിയിരിക്കുന്ന മൂലകത്തിൻ്റെ മുകളിൽ നിന്ന് 50% സ്ഥാപിക്കുന്നു.
left: 50%;	ഒരു മൂലകത്തെ അതിൽ അടങ്ങിയിരിക്കുന്ന മൂലകത്തിൻ്റെ ഇടതുവശത്ത് നിന്ന് 50% സ്ഥാപിക്കുന്നു.

ഫ്ലെക്സ്ബോക്സ്, ഗ്രിഡ്, പരമ്പരാഗത CSS എന്നിവ ഉപയോഗിച്ച് ഘടകങ്ങൾ കേന്ദ്രീകരിക്കുന്നു

ആദ്യ സ്ക്രിപ്റ്റ് എ എങ്ങനെ കേന്ദ്രീകരിക്കാമെന്ന് കാണിക്കുന്നു

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

രണ്ടാമത്തെ സ്ക്രിപ്റ്റിൽ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു CSS Grid സമാനമായ ഫലങ്ങൾ നേടുന്നതിന്. അപേക്ഷിച്ചുകൊണ്ട് display: grid; പാരൻ്റ് കണ്ടെയ്നറിലേക്ക് ഒപ്പം place-items: center;, കുട്ടികളുടെ ഘടകങ്ങൾ തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിച്ചിരിക്കുന്നു. ഗ്രിഡ് അടിസ്ഥാനമാക്കിയുള്ള ലേഔട്ടുകൾക്ക് ഈ രീതി പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. അവസാനമായി, പരമ്പരാഗത രീതിയിൽ ക്രമീകരണം ഉൾപ്പെടുന്നു position: absolute; ചൈൽഡ് എലമെൻ്റിലും ഉപയോഗത്തിലും top: 50%; ഒപ്പം left: 50%; കൂടെ transform: translate(-50%, -50%); അത് രക്ഷിതാവിനുള്ളിൽ കേന്ദ്രീകരിക്കാൻ. നിശ്ചിത വലിപ്പത്തിലുള്ള ഘടകങ്ങൾക്ക് ഈ സമീപനം ഫലപ്രദമാണ്.

ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് തിരശ്ചീനമായി ഒരു ഡിവിഷൻ കേന്ദ്രീകരിക്കുന്നു

Flexbox ഉള്ള HTML, CSS

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS ഗ്രിഡ് ഉപയോഗിച്ച് ഒരു ഡിവിഷൻ കേന്ദ്രീകരിക്കുന്നു

ഗ്രിഡ് ലേഔട്ടിനൊപ്പം HTML, CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS ഉപയോഗിച്ച് കേന്ദ്രീകരിക്കുന്നതിനുള്ള പരമ്പരാഗത രീതി

മാർജിൻ ഓട്ടോ ഉള്ള HTML, CSS

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

ഘടകങ്ങൾ കേന്ദ്രീകരിക്കുന്നതിനുള്ള വിപുലമായ സാങ്കേതിക വിദ്യകൾ

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

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

കേന്ദ്രീകൃത ഘടകങ്ങളെക്കുറിച്ചുള്ള പൊതുവായ ചോദ്യങ്ങളും ഉത്തരങ്ങളും

ഞാൻ എങ്ങനെയാണ് ഒരു ഇൻലൈൻ ഘടകം കേന്ദ്രീകരിക്കുന്നത്?
ഉപയോഗിക്കുക text-align: center; പാരൻ്റ് കണ്ടെയ്‌നറിൽ ഇൻലൈൻ ഘടകങ്ങളുടെ മധ്യത്തിലേക്ക്.
എനിക്ക് മാർജിൻ ഉപയോഗിക്കാമോ: ഓട്ടോ; ഒരു ബ്ലോക്ക് ഘടകം കേന്ദ്രീകരിക്കണോ?
അതെ, ക്രമീകരണം margin: auto; ഇടത് വലത് വശങ്ങളിൽ ഒരു ബ്ലോക്ക് ഘടകം കേന്ദ്രീകരിക്കും.
കേന്ദ്രീകരിക്കുന്നതിനുള്ള ഫ്ലെക്സ്ബോക്സും ഗ്രിഡും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്?
Flexbox ഏകമാനമായ ലേഔട്ടുകൾക്കായി ഉപയോഗിക്കുന്നു, അതേസമയം Grid ദ്വിമാന ലേഔട്ടുകൾക്കുള്ളതാണ്.
CSS-നൊപ്പം ഒരു നിശ്ചിത വീതിയുള്ള ഘടകം ഞാൻ എങ്ങനെ കേന്ദ്രീകരിക്കും?
ഉപയോഗിക്കുക margin: auto; അഥവാ position: absolute; കൂടെ transform: translate(-50%, -50%);
എനിക്ക് Flexbox ഉപയോഗിച്ച് ഘടകങ്ങൾ ലംബമായി കേന്ദ്രീകരിക്കാനാകുമോ?
അതെ, ഉപയോഗിക്കുക align-items: center; ഒരു ഫ്ലെക്സ് കണ്ടെയ്നറിൽ മൂലകങ്ങളെ ലംബമായി കേന്ദ്രീകരിക്കുക.
ടെക്സ്റ്റ് അലൈൻ ചെയ്യുമോ: മധ്യഭാഗം; ബ്ലോക്ക് ഘടകങ്ങൾക്ക് വേണ്ടി പ്രവർത്തിക്കണോ?
ഇല്ല, text-align: center; ഇൻലൈൻ അല്ലെങ്കിൽ ഇൻലൈൻ-ബ്ലോക്ക് ഘടകങ്ങൾക്ക് മാത്രം പ്രവർത്തിക്കുന്നു.
ഒരു കണ്ടെയ്‌നറിൽ ഒന്നിലധികം ഘടകങ്ങൾ കേന്ദ്രീകരിക്കുന്നത് എങ്ങനെ?
ഉപയോഗിക്കുക display: flex; കൂടെ justify-content: center; ഒപ്പം align-items: center;
എന്താണ് സ്ഥലം-ഇനങ്ങൾ: കേന്ദ്രം; ഗ്രിഡിൽ?
place-items: center; ഒരു ഗ്രിഡ് കണ്ടെയ്‌നറിൽ ഇനങ്ങൾ തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിക്കുന്നു.
Flexbox അല്ലെങ്കിൽ Grid ഇല്ലാതെ ഘടകങ്ങൾ കേന്ദ്രീകരിക്കാൻ കഴിയുമോ?
അതെ, പോലുള്ള രീതികൾ ഉപയോഗിക്കുന്നു margin: auto;, text-align: center;, അഥവാ position: absolute; ഘടകങ്ങൾ കേന്ദ്രീകരിക്കാനും കഴിയും.

CSS കേന്ദ്രീകൃത ടെക്നിക്കുകൾ പൊതിയുന്നു

വ്യത്യസ്ത CSS രീതികൾ ഉപയോഗിച്ച് ഘടകങ്ങൾ തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുന്നത് എങ്ങനെയെന്ന് മനസ്സിലാക്കുന്നത് ദൃശ്യപരമായി ആകർഷകമായ വെബ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിന് അത്യന്താപേക്ഷിതമാണ്. പോലുള്ള സാങ്കേതിക വിദ്യകളിൽ പ്രാവീണ്യം നേടുന്നതിലൂടെ Flexbox, Grid, ഒപ്പം traditional CSS പ്രോപ്പർട്ടികൾ, ഡവലപ്പർമാർക്ക് അവരുടെ ഡിസൈനുകൾ പ്രവർത്തനപരവും സൗന്ദര്യാത്മകവുമാണെന്ന് ഉറപ്പാക്കാൻ കഴിയും. ഈ രീതികൾ പരീക്ഷിക്കുന്നത് CSS കഴിവുകളെക്കുറിച്ച് ആഴത്തിലുള്ള ധാരണ നൽകും.

CSS ഉപയോഗിച്ച് ഒരു ഡിവിയെ എങ്ങനെ തിരശ്ചീനമായി കേന്ദ്രീകരിക്കാം