CSS ஐப் பயன்படுத்தி ஒரு Div இல் உரையை செங்குத்தாக மையப்படுத்துதல்

செங்குத்து மையப்படுத்துதலுக்கான மேம்பட்ட CSS நுட்பங்கள்

மூன்றாவது ஸ்கிரிப்ட்டில், அட்டவணை காட்சி முறையைப் பயன்படுத்துகிறோம். அமைத்தல் display: table; கொள்கலன் மீது மற்றும் display: table-cell; உடன் உருவாக்கப்பட்ட போலி உறுப்பு மீது ::before பயன்படுத்த அனுமதிக்கிறது vertical-align: middle; சொத்து. இந்த முறை அட்டவணை செல்களின் நடத்தையைப் பிரதிபலிக்கிறது, இது உள்ளடக்கத்தை செங்குத்தாக மையப்படுத்துவதை சாத்தியமாக்குகிறது. நவீன வலை வடிவமைப்பில் இந்த அணுகுமுறை குறைவாகவே பயன்படுத்தப்படுகிறது என்றாலும், பழைய உலாவிகளுடன் இணக்கத்தன்மையை பராமரிக்க அல்லது மரபுக் குறியீட்டைக் கையாளும் போது இது பயனுள்ளதாக இருக்கும். இது புதிய தளவமைப்பு அமைப்புகளை நம்பாமல் உள்ளடக்கத்தை மையப்படுத்த நம்பகமான வழியை வழங்குகிறது.

நான்காவது ஸ்கிரிப்ட் உதாரணம் பயன்படுத்துகிறது line-height சொத்து. அமைப்பதன் மூலம் line-height கொள்கலனின் உயரத்திற்கு சமமாக, உரை செங்குத்தாக மையமாக உள்ளது. இந்த நுட்பம் நேரடியானது மற்றும் ஒற்றை வரி உரைக்கு பயனுள்ளதாக இருக்கும். இருப்பினும், கன்டெய்னரின் உயரம் மாறக்கூடிய பல வரி உரை அல்லது டைனமிக் உள்ளடக்கத்திற்கு இது பொருந்தாது. அதன் வரம்புகள் இருந்தபோதிலும், தி line-height எளிய காட்சிகளில் உரையை செங்குத்தாக மையப்படுத்துவதற்கான விரைவான மற்றும் எளிதான தீர்வாகும்.

செங்குத்து மையப்படுத்தலுக்கு ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்துதல்

CSS Flexbox

#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 இல் செங்குத்து மையப்படுத்தல் பற்றிய பொதுவான கேள்விகள்

1. ஒரு div இல் உரையை செங்குத்தாக மையப்படுத்த எளிதான வழி எது?
2. பயன்படுத்தி display: flex; உடன் justify-content: center; மற்றும் align-items: center; பெரும்பாலும் எளிதான மற்றும் மிகவும் பயனுள்ள முறையாகும்.
3. பழைய உலாவிகளில் உரையை எப்படி செங்குத்தாக மையப்படுத்துவது?
4. உடன் அட்டவணை காட்சி முறையைப் பயன்படுத்துதல் display: table; மற்றும் vertical-align: middle; பழைய உலாவிகளில் செங்குத்து மையப்படுத்தலை அடைய உதவும்.
5. உரையை செங்குத்தாக மையப்படுத்த CSS கட்டத்தைப் பயன்படுத்த முடியுமா?
6. ஆம், CSS கட்டம் உரையை செங்குத்தாகப் பயன்படுத்தி மையப்படுத்தலாம் display: grid; மற்றும் place-items: center;.
7. பல வரி உரையை செங்குத்தாக மையப்படுத்த முடியுமா?
8. ஆம், ஃப்ளெக்ஸ்பாக்ஸ் அல்லது சிஎஸ்எஸ் கிரிட் பயன்படுத்தி ஒரு கொள்கலனுக்குள் பல வரி உரையை செங்குத்தாக எளிதாக மையப்படுத்தலாம்.
9. தெரிந்த கொள்கலன் உயரத்துடன் உரையை செங்குத்தாக எப்படி மையப்படுத்துவது?
10. நீங்கள் அமைக்க முடியும் line-height கொள்கலனின் உயரத்துடன் பொருந்தக்கூடிய பண்பு, உரையை திறம்பட மையப்படுத்துகிறது.
11. கொள்கலன் உயரம் மாறும் என்றால் என்ன?
12. ஃப்ளெக்ஸ்பாக்ஸ், கிரிட் அல்லது தி transform மாறும் கொள்கலன் உயரங்களுடன் கூட நிலையான செங்குத்து மையப்படுத்தலை சொத்து உறுதி செய்கிறது.
13. பயன்படுத்துவதில் ஏதேனும் குறைபாடுகள் உள்ளதா transform: translateY(-50%);?
14. பயனுள்ளதாக இருக்கும்போது, ​​​​அது பெற்றோரிடம் இருக்க வேண்டும் position: relative; மற்றும் Flexbox அல்லது Grid உடன் ஒப்பிடும்போது செயல்படுத்துவது சற்று சிக்கலானதாக இருக்கும்.
15. பதிலளிக்கக்கூடிய வடிவமைப்பில் உரையை எவ்வாறு செங்குத்தாக மையப்படுத்துவது?
16. ஃப்ளெக்ஸ்பாக்ஸ் அல்லது CSS கட்டத்தைப் பயன்படுத்துவது பதிலளிக்கக்கூடிய வடிவமைப்புகளுக்கு மிகவும் பரிந்துரைக்கப்படுகிறது, ஏனெனில் அவை வெவ்வேறு திரை அளவுகள் மற்றும் நோக்குநிலைகளுக்கு நன்கு பொருந்துகின்றன.

செங்குத்து மையப்படுத்தல் பற்றிய இறுதி எண்ணங்கள்

ஒரு div க்குள் உரையின் செங்குத்து மையத்தை அடைவது பல பயனுள்ள முறைகள் மூலம் நிறைவேற்றப்படலாம். ஃப்ளெக்ஸ்பாக்ஸ் மற்றும் கிரிட் போன்ற நவீன நுட்பங்கள் மிகவும் நெகிழ்வுத்தன்மையையும் செயல்படுத்துவதையும் எளிதாக்குகின்றன. டேபிள் டிஸ்ப்ளே மற்றும் லைன்-ஹைட் போன்ற பழைய முறைகள், குறிப்பிட்ட சந்தர்ப்பங்களில் இன்னும் பயனுள்ளதாக இருக்கும். இந்த வித்தியாசமான அணுகுமுறைகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் தங்கள் உள்ளடக்கம் பார்வைக்கு ஈர்க்கப்படுவதையும் பல்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சரியாக சீரமைக்கப்படுவதையும் உறுதிசெய்ய முடியும்.