CSS ஐப் பயன்படுத்தி கிடைமட்ட மற்றும் செங்குத்தாக சீரமைப்பது எப்படி?

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

• கிடைமட்ட சீரமைப்பு
• செங்குத்து சீரமைப்பு

CSS ஐப் பயன்படுத்தி கிடைமட்ட மற்றும் செங்குத்தாக சீரமைப்பது எப்படி?

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

கிடைமட்ட சீரமைப்பு

CSS இல், உரை-சீரமைப்பு பண்பு அதன் மூல உறுப்புக்குள் உரையை கிடைமட்டமாக சீரமைக்கப் பயன்படுகிறது. சிறந்த புரிதலுக்கு கீழே உள்ள குறியீடு துணுக்குகளைப் பார்வையிடவும்:

மேலே உள்ள குறியீடு துணுக்கில்:

• முதலில், பெற்றோர் ' div 'உறுப்பு ஒரு வர்க்க பண்புடன் பயன்படுத்தப்படுகிறது' கணக்கு ”.
• அடுத்து, மூன்று குழந்தை கூறுகள் உருவாக்கப்பட்டு, ஒவ்வொரு டிவிக்கும் வகுப்பு பண்புக்கூறு ஒதுக்கப்பட்டுள்ளது.
• முடிவில், 'leftAlign', 'centerAlign' மற்றும் 'rightAlign' ஆகியவற்றின் மதிப்புகள் வகுப்புகளுக்கு வழங்கப்படுகின்றன.

இப்போது, ​​பின்வரும் CSS பண்புகளை '' இல் செருகவும் <பாணி> 'குறிச்சொல்:

மேலே உள்ள குறியீடு தொகுதியில்:

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

தொகுத்தல் செயல்முறைக்குப் பிறகு, HTML கூறுகள் இப்படி இருக்கும்:

உலாவியின் மேலே உள்ள ஸ்னாப்ஷாட் உறுப்புகள் இடது, மையம் மற்றும் வலது நிலைகளில் கிடைமட்டமாக சீரமைக்கப்பட்டுள்ளன என்பதைக் காட்டுகிறது.

செங்குத்து சீரமைப்பு

CSS” செங்குத்து-சீரமைப்பு 'பண்பு தேர்ந்தெடுக்கப்பட்ட உறுப்பை 'க்கு சீரமைக்கிறது y-அச்சு ” அவர்களின் பெற்றோர் உறுப்புக்குள். 'செங்குத்து-சீரமைப்பு' சொத்துக்கான சாத்தியமான மதிப்புகள் ' அடிப்படை ”,” துணை ”,” அருமை ”,” மேல் ”,” உரை மேல் ”,” நடுத்தர ”,” கீழே ', மற்றும் ' உரை-கீழே ”. இருப்பினும், வலைப்பக்க வடிவமைப்புகளை உருவாக்கும் போது டெவலப்பர்கள் பெரும்பாலும் 'மேல்', 'நடுத்தர' மற்றும் 'கீழே' மதிப்புகளைப் பயன்படுத்துகின்றனர். தேர்ந்தெடுக்கப்பட்ட HTML உறுப்பை மேல் நிலையில் சீரமைக்க, கீழே உள்ள குறியீடு துணுக்கைப் பார்வையிடவும்:

மேலே உள்ள குறியீடு துணுக்கில்:

• முதலில் ஒரு பெற்றோரை உருவாக்குங்கள்' div 'உறுப்பு மற்றும் ' மதிப்பை ஒதுக்கவும் எண்ணிக்கை 'க்கு' வர்க்கம் ” பண்பு.
• பெற்றோர் கொள்கலனுக்குள், '' பயன்படுத்தவும் ” குறிச்சொல்லிட்டு, படத்தின் பாதையை மதிப்பாக வழங்கவும் src ” பண்பு.
• கூடுதலாக, 'இன் மதிப்பை வழங்கவும் 200px 'இரண்டிற்கும்' அகலம் 'மற்றும்' உயரம் 'இன்' பண்புக்கூறுகள் ” குறிச்சொல்.
• அடுத்து, '' பயன்படுத்தவும் 'குறிச்சொல்லிட்டு அதற்கு ஒரு வகுப்பை வழங்கவும்' தலைப்புமேல் சீரமை ”. இறுதியில், அதற்கு போலித் தரவை வழங்கவும்.

இப்போது, ​​HTML கூறுகளை வடிவமைக்க CSS பண்புகளைச் சேர்க்கவும்:

மேலே உள்ள குறியீடு தொகுதியில்:

• முதலில், பெற்றோரைத் தேர்ந்தெடுக்கவும் ' எண்ணிக்கை ” வகுப்பு மற்றும் CSS க்கு “fit-content”, “block”, “100px”, “10px” மற்றும் “2px solid red” மதிப்புகளை வழங்கவும் “ அகலம் ”,” காட்சி ”,” விளிம்பு-இடது ”,” திணிப்பு 'மற்றும்' எல்லை 'பண்புகள். இந்த பண்புகள் பெற்றோர் உறுப்பு பாணியில் பயன்படுத்தப்படுகின்றன.
• அடுத்து, '' என்பதைத் தேர்ந்தெடுக்கவும் தலைப்புமேல் சீரமை 'வகுப்பு மற்றும் மதிப்பை வழங்கவும்' மேல் 'சிஎஸ்எஸ்க்கு' செங்குத்து-சீரமைப்பு ”சொத்து. இது HTML உறுப்பை மேல் நிலைக்கு சீரமைக்கச் செய்கிறது.

மேலே உள்ள கோடுகளின் செயல்பாட்டிற்குப் பிறகு, வலைப்பக்கம் இப்படித் தோன்றும்:

மேலே உள்ள ஸ்னாப்ஷாட் தேர்ந்தெடுக்கப்பட்ட HTML உறுப்பு இப்போது மேலே சீரமைக்கப்பட்டுள்ளது என்பதைக் காட்டுகிறது. அதே வழியில், உறுப்பு நடுவில், கீழ் திசைகள் போன்றவற்றில் சீரமைக்கப்படலாம்.

முடிவுரை

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