Jassif Team Institution

CSS Centering Elements

CSS உடன், பல முறைகளைப் பயன்படுத்தி உறுப்புகளை மையப்படுத்தலாம் (கிடைமட்டமாக, செங்குத்தாக அல்லது இரண்டும்), உறுப்பின் வகையைப் பொறுத்து.

Center Align Block Elements

கிடைமட்டமாக ஒரு block-level உறுப்பை (div போன்ற) மையப்படுத்த margin: auto; பயன்படுத்தவும்.

உறுப்புக்கு ஒரு அகலத்தையும் குறிப்பிடவும், அது அதன் கொள்கலனின் விளிம்புகளுக்கு நீள்வதைத் தடுக்க.

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Center Align Text

ஒரு block-level உறுப்புக்குள் உரையை மையப்படுத்த, text-align: center; பயன்படுத்தவும்.

p {
  text-align: center;
}

Center Align an Image

ஒரு படத்தை மையப்படுத்த, margin-left மற்றும் margin-right ஐ auto ஆக அமைத்து, படத்தை block உறுப்பாக மாற்றவும்:

Forest

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Center Align with Flexbox

CSS flexbox உடன், ஒரு flex கொள்கலனுக்குள் உறுப்புகளை கிடைமட்டமாகவும் செங்குத்தாகவும் மையப்படுத்தலாம்.

justify-content மற்றும் align-items பண்புகள் இரண்டும் center ஆக அமைக்கப்பட்ட ஒரு flex கொள்கலன் உருப்படி(களை) மையத்தில் சீரமைக்கும் (இரண்டு அச்சுகளிலும்):

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

Center Align with Grid

CSS grid உடன், ஒரு grid கொள்கலனுக்குள் உறுப்புகளை கிடைமட்டமாகவும் செங்குத்தாகவும் மையப்படுத்தலாம்.

place-items பண்பு center ஆக அமைக்கப்பட்ட ஒரு grid கொள்கலன் உருப்படி(களை) மையத்தில் சீரமைக்கும் (இரண்டு அச்சுகளிலும்).

.center {
  display: grid;
  place-items: center;
  height: 200px;
  border: 3px solid green;
}

Left and Right Align - Using position

உறுப்புகளை சீரமைக்க மற்றொரு முறை position: absolute; பயன்படுத்துவது:

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid green;
  padding: 10px;
}

Left and Right Align - Using float

ஒரு உறுப்பை இடது அல்லது வலது பக்கமாக சீரமைக்க மற்றொரு முறை float பண்பைப் பயன்படுத்துவது:

.right {
  float: right;
  width: 300px;
  border: 3px solid green;
  padding: 10px;
}

Center Align with position and transform

தெரியாத அல்லது மாறும் பரிமாணங்களைக் கொண்ட உறுப்புகளை நீங்கள் கையாள்ந்தால், position: absolute; உடன் transform: translate(); ஐ இணைப்பது ஒரு பொதுவான நுட்பமாகும்:

.container p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Exercise

div போன்ற ஒரு block உறுப்பை கிடைமட்டமாக மையப்படுத்த எந்த CSS பண்பைப் பயன்படுத்தலாம்?