CSS ஐப் பயன்படுத்தி அனைத்து உலாவிகளுக்கும் ஒரு div உறுப்பை செங்குத்தாக மையப்படுத்துவது எப்படி

வலை உருவாக்கத்தில், உறுப்புகளின் அமைப்பை சரியாக உருவாக்குவது முக்கியம். இருப்பினும், CSS3 Flexible Box போன்ற பல CSS பண்புகள், வலைப்பக்கங்கள் மற்றும் HTML உறுப்புகளின் தளவமைப்பைச் சரிசெய்ய பயனுள்ளதாக இருக்கும். வலைப்பக்கங்கள் மற்றும் பயன்பாடுகளை சுழல்நிலை முறையில் ஒழுங்கமைக்க Flexible Box பயன்படுகிறது. இந்த Flexbox பயன்முறையானது சிக்கலான இணையப் பக்கங்கள் மற்றும் பயன்பாடுகளுக்கான தளவமைப்புகளை உருவாக்க உதவுகிறது.

CSSஐ செங்குத்தாகப் பயன்படுத்தும் அனைத்து உலாவிகளுக்கும் ஒரு div உறுப்பை எவ்வாறு மையப்படுத்துவது என்பது குறித்து இந்த இடுகை உங்களுக்கு வழிகாட்டும்.

CSS ஐப் பயன்படுத்தி div Element ஐ எவ்வாறு சீரமைப்பது?

காட்சிப் பண்புகளைப் பயன்படுத்தி div உறுப்பை செங்குத்தாக சீரமைக்க முடியும் ' நெகிழ்வு 'சிஎஸ்எஸ் உடன்' align-பொருட்கள் 'சொத்து மற்றும்' நியாயப்படுத்த-உள்ளடக்கம் ”சொத்து. 'align-items' பண்பு உறுப்பை செங்குத்தாக சீரமைக்கிறது, மேலும் 'justify-content' பண்பு உள்ளடக்கத்தை கிடைமட்டமாக சீரமைக்கிறது.

எடுத்துக்காட்டு: CSS உடன் ஒரு div Element ஐ செங்குத்தாக மையப்படுத்துவது எப்படி?

HTML இல், முதலில், ''

'உறுப்பு மற்றும் அதற்கு வகுப்பை ஒதுக்கவும்' முக்கிய உள்ளடக்கம் ”. “

” குறிச்சொற்களுக்கு இடையில், “” 'பின்வரும் பண்புகளுடன் கூடிய உறுப்பு:

---

---

• ' src படத்தின் URL ஐக் குறிப்பிடுவதற்கு ” பண்புக்கூறு பயன்படுத்தப்படுகிறது.
• ' எல்லாம் ” பண்புக்கூறு சில உரையை வரையறுக்கிறது, அது ஒரு படத்தை ஏற்றத் தவறினால் அதன் இடத்தில் காண்பிக்கப்படும்.
• ' அகலம் படத்தின் அகலத்தை சரிசெய்ய பண்புக்கூறு பயன்படுத்தப்படுகிறது.
• பின்னர், ''

  ” பத்தியை பக்கத்தில் உட்பொதிக்க உறுப்பு.

இதோ HTML குறியீடு:

< div வர்க்கம் = 'முக்கிய உள்ளடக்கம்' >
< img src = '/images/laptop-notepad.jpg' எல்லாம் = 'நோட்பேட் மற்றும் பேனாவுடன் மடிக்கணினி' அகலம் = '300' >
< ப > லேப்டாப் என்பது கையடக்க கணினி என்றும் அறியப்படுகிறது என ஒரு நோட்புக் கணினி. ப >
div >

CSS இல், divக்கு பல ஸ்டைலிங் பண்புகளைக் குறிப்பிடுவோம்.

பாணி 'முக்கிய-உள்ளடக்கம்' வகுப்பு

.முக்கிய-உள்ளடக்கம் {
உயரம்: ஐம்பது % ;
பின்னணி நிறம்: #46C2CB;
எழுத்துரு அளவு: 24px;
திணிப்பு: 10px;
}

பின்வரும் CSS பண்புகள் 'இல் வரையறுக்கப்பட்டுள்ளன. முக்கிய உள்ளடக்கம் ' வர்க்கம்:

• ' உயரம் ” பண்பு
  கொள்கலனின் உயரத்தை சரிசெய்ய பயன்படுத்தப்படுகிறது.
• ' பின்னணி நிறம் 'உறுப்பின் பின்னணி நிறத்தை வரையறுக்கிறது.
• ' எழுத்துரு அளவு 'உறுப்பின் எழுத்துரு அளவைக் குறிப்பிடுகிறது.
• ' திணிப்பு ”பண்பு உறுப்பு உள்ளடக்கத்தைச் சுற்றி இடத்தை அமைக்கிறது.

வெளியீட்டில் இருந்து, div உறுப்பின் உள்ளடக்கம் மையத்தில் இல்லை என்பதை நீங்கள் கவனிக்கலாம்:

'ஐ மையப்படுத்த உதவும் CSS பண்புகளைப் பயன்படுத்துவதற்கு முன்னேறுவோம்.

”உறுப்பு செங்குத்தாக. இந்த பண்புகளை வகுப்பில் சேர்க்கவும் ' முக்கிய உள்ளடக்கம் ”

உறுப்பை அணுகப் பயன்படுகிறது:

காட்சி: நெகிழ்வு ;
align-items: மையம்;

இதோ விளக்கம்:

• ' காட்சி 'சொத்து' நெகிழ்வு ” div தளவமைப்பை அதன் உறுப்புக்கு நெகிழ்வானதாக மாற்ற பயன்படுகிறது.
• ' align-பொருட்கள் 'CSS சொத்து' என அமைக்கப்பட்டுள்ளது மையம் ”, இது div உறுப்புகளை செங்குத்தாக சீரமைக்கும்.

வெளியீடு

CSS ஐப் பயன்படுத்தி அனைத்து உலாவிகளுக்கும் ஒரு div உறுப்பை செங்குத்தாக எப்படி மையப்படுத்துவது என்பதை நீங்கள் கற்றுக்கொண்டீர்கள்.

முடிவுரை

ஒரு div உறுப்பை செங்குத்தாக மையப்படுத்த, CSS ' காட்சி 'சொத்து பயன்படுத்தப்படுகிறது' நெகிழ்வு ' மதிப்பு. இந்த மதிப்பு

கொள்கலனை அதன் உறுப்புகளுக்கு நெகிழ்வானதாக ஆக்குகிறது. div உறுப்பை செங்குத்தாக சீரமைக்க, ' align-பொருட்கள் 'சொத்து மற்றும் அதை ஒதுக்க' மையம் ' மதிப்பு. அனைத்து உலாவிகளிலும் செங்குத்தாக div கூறுகளை மையப்படுத்த CSS ஐ எவ்வாறு பயன்படுத்துவது என்பதை இந்த வலைப்பதிவு காட்டுகிறது.