CSS ஐப் பயன்படுத்தி ஒரு டிவியை கிடைமட்டமாக மையப்படுத்துவது எப்படி

CSS ஐப் பயன்படுத்தி ஒரு டிவியை கிடைமட்டமாக மையப்படுத்துவது எப்படி
CSS ஐப் பயன்படுத்தி ஒரு டிவியை கிடைமட்டமாக மையப்படுத்துவது எப்படி
Mia Chevalier
ஞாயிறு, 16 ஜூன், 2024 ’அன்று’ முற்பகல் 2:55:48

CSS உடன் Div சீரமைப்பில் தேர்ச்சி பெறுதல்

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% நிலைநிறுத்துகிறது.

Flexbox, Grid மற்றும் பாரம்பரிய CSS மூலம் கூறுகளை மையப்படுத்துதல்

முதல் ஸ்கிரிப்ட் a ஐ எப்படி மையப்படுத்துவது என்பதை விளக்குகிறது

பயன்படுத்தி 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 உடன் மையப்படுத்துவதற்கான பாரம்பரிய முறை

Margin Auto உடன் 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 தளவமைப்பு நுட்பங்களுடன் இந்த முறைகளை இணைப்பது, தேவையான கூறுகளை துல்லியமாக சீரமைப்பதற்கான ஒரு விரிவான கருவித்தொகுப்பை வழங்குகிறது.

கூறுகளை மையப்படுத்துவது பற்றிய பொதுவான கேள்விகள் மற்றும் பதில்கள்

  1. இன்லைன் உறுப்பை எவ்வாறு மையப்படுத்துவது?
  2. பயன்படுத்தவும் text-align: center; இன்லைன் கூறுகளை மையப்படுத்த பெற்றோர் கொள்கலனில்.
  3. நான் விளிம்பைப் பயன்படுத்தலாமா: ஆட்டோ; ஒரு தொகுதி உறுப்பை மையப்படுத்தவா?
  4. ஆம், அமைவு margin: auto; இடது மற்றும் வலது பக்கங்களில் ஒரு தொகுதி உறுப்பு மையமாக இருக்கும்.
  5. மையப்படுத்துவதற்கான Flexbox மற்றும் Grid ஆகியவற்றுக்கு என்ன வித்தியாசம்?
  6. Flexbox ஒரு பரிமாண தளவமைப்புகளுக்குப் பயன்படுத்தப்படுகிறது Grid இரு பரிமாண அமைப்புகளுக்கானது.
  7. CSS உடன் நிலையான அகல உறுப்பை எவ்வாறு மையப்படுத்துவது?
  8. பயன்படுத்தவும் margin: auto; அல்லது position: absolute; உடன் transform: translate(-50%, -50%);
  9. Flexbox மூலம் உறுப்புகளை செங்குத்தாக மையப்படுத்த முடியுமா?
  10. ஆம், பயன்படுத்தவும் align-items: center; ஒரு நெகிழ்வு கொள்கலனில் செங்குத்தாக உறுப்புகளை மையப்படுத்த.
  11. உரையை சீரமைக்கிறதா: மையம்; தொகுதி உறுப்புகளுக்கு வேலை?
  12. இல்லை, text-align: center; இன்லைன் அல்லது இன்லைன்-பிளாக் கூறுகளுக்கு மட்டுமே வேலை செய்கிறது.
  13. ஒரு கொள்கலனில் பல கூறுகளை எவ்வாறு மையப்படுத்துவது?
  14. பயன்படுத்தவும் display: flex; உடன் justify-content: center; மற்றும் align-items: center;
  15. இடம்-பொருட்கள் என்றால் என்ன: மையம்; கட்டத்திலா?
  16. place-items: center; ஒரு கட்டம் கொள்கலனில் பொருட்களை கிடைமட்டமாகவும் செங்குத்தாகவும் மையப்படுத்துகிறது.
  17. Flexbox அல்லது Grid இல்லாமல் உறுப்புகளை மையப்படுத்த முடியுமா?
  18. ஆம், போன்ற முறைகளைப் பயன்படுத்துதல் margin: auto;, text-align: center;, அல்லது position: absolute; உறுப்புகளை மையப்படுத்தவும் முடியும்.

CSS மையப்படுத்தல் நுட்பங்களை மூடுதல்

வெவ்வேறு CSS முறைகளைப் பயன்படுத்தி கூறுகளை கிடைமட்டமாக எவ்வாறு மையப்படுத்துவது என்பதைப் புரிந்துகொள்வது பார்வைக்கு ஈர்க்கும் வலை தளவமைப்புகளை உருவாக்குவதற்கு அவசியம். போன்ற மாஸ்டரிங் நுட்பங்கள் மூலம் Flexbox, Grid, மற்றும் traditional CSS பண்புகள், டெவலப்பர்கள் தங்கள் வடிவமைப்புகள் செயல்பாட்டு மற்றும் அழகியல் மகிழ்ச்சியுடன் இருப்பதை உறுதிசெய்ய முடியும். இந்த முறைகளுடன் பரிசோதனை செய்வது CSS திறன்களைப் பற்றிய ஆழமான புரிதலை வழங்கும்.