- ஒரு படத்தை கிடைமட்டமாக Div இல் மையப்படுத்துவது எப்படி?
- மார்ஜின் சொத்து
- ஃப்ளெக்ஸ்பாக்ஸ் தொகுதி
- கட்டக் காட்சி தளவமைப்பு
- நிலை பண்பு
ஒரு படத்தை கிடைமட்டமாக Div இல் மையப்படுத்துவது எப்படி?
டெவலப்பர் விளிம்பு சொத்து, ஃப்ளெக்ஸ்பாக்ஸ் தொகுதி, கிரிட் வியூ தளவமைப்பு மற்றும் ஒரு படத்தை கிடைமட்டமாக மையப்படுத்த பொசிஷன் பண்புக்கூறு ஆகியவற்றைப் பயன்படுத்தலாம். div குறிச்சொல்லில் படத்தை கிடைமட்டமாக மையமாக சீரமைக்க கீழே உள்ள வழிகாட்டியைப் பின்பற்றவும்.
HTML கோப்பில் படம் இந்த வழியில் வைக்கப்படும் ஒரு div உள்ளது என்று வைத்துக்கொள்வோம்:
< div வர்க்கம் = 'வேர்' >
< img src = '../book.jpg' உயரம் = 'ஐம்பது%' அகலம் = 'ஐம்பது%' வர்க்கம் = 'படம்' >
< / div >
படத்தின் அகலம் மற்றும் உயரம் 50% மற்றும் 'படம்' வகுப்பைப் பெறுகிறது.
மார்ஜின் சொத்தைப் பயன்படுத்துதல்
பயனர்கள் விளிம்புப் பண்புகளைப் பயன்படுத்தி HTML உறுப்புகளைச் சுற்றி இடத்தைச் சேர்க்கலாம். சாளரத் திரையின் அளவை மாற்றிய பின் கிடைக்கும் இடத்திற்கு ஏற்ப இது ஒரு விளிம்பை ஒதுக்குகிறது. எடுத்துக்காட்டாக, விளிம்பு-இடது மற்றும் வலதுபுறத்தை தானாக அமைக்கிறது, மேலும் காட்சி பண்பு தடுக்கும் வகையில் அமைக்கப்பட்டுள்ளது:
img {
காட்சி: தொகுதி;
விளிம்பு-இடது: ஆட்டோ;
விளிம்பு-வலது: ஆட்டோ;
}
மேலே உள்ள எடுத்துக்காட்டைச் செயல்படுத்திய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:
மேலே உள்ள வெளியீடு படம் இப்போது மையத்தில் இருப்பதைக் காட்டுகிறது.
Flexbox தொகுதியைப் பயன்படுத்துதல்
' நெகிழ் பெட்டி ” என்பது ஒரு முழுமையான பண்புகளைக் கொண்ட ஒரு தொகுதி. எங்கள் விஷயத்தில், ரூட் உறுப்பு வகுப்பைத் தேர்ந்தெடுத்து, காட்சிப் பொருளின் மதிப்பாக ஃப்ளெக்ஸைப் பயன்படுத்தவும். மையத்தை மதிப்பாக அமைக்கவும் ' நியாயப்படுத்த-உள்ளடக்கம் 'மற்றும்' align-பொருட்கள் 'பண்புகள்:
.வேர் {காட்சி: நெகிழ்வு;
நியாயப்படுத்த - உள்ளடக்கம் : மையம்;
align-items: மையம்;
பின்னணி - நிறம் : நீலம்;
}
குறியீட்டை இயக்கிய பின், வலைப்பக்கம் இப்படி இருக்கும்:
மேலே உள்ள வெளியீடு, 'நீலம்' என அமைக்கப்பட்ட பின்புல வண்ணத்துடன், div இன் மையத்தில் படம் காட்டப்படுவதைக் காட்டுகிறது.
கிரிட் வியூ லேஅவுட் மாட்யூலைப் பயன்படுத்துதல்
கட்டக் காட்சி தளவமைப்பு 12 நெடுவரிசைகளைக் கொண்டுள்ளது, மேலும் மொத்த அகலம் 100% ஆக அமைக்கப்பட்டுள்ளது, மேலும் இது ஒவ்வொரு உறுப்பையும் வலைப்பக்கத்தில் ஒரு குறிப்பிட்ட நிலையில் வைக்கிறது:
.வேர் {காட்சி: கட்டம்;
இடம்-பொருட்கள்: மையம்;
}
மேலே உள்ள குறியீடு துணுக்கில், 'கட்டம்' மதிப்பு காட்சி பண்புக்கு ஒதுக்கப்பட்டுள்ளது. 'இடம்-உருப்படி' என்பது 'நியாயப்படுத்துதல்-உள்ளடக்கம்' மற்றும் 'உருப்படிகளை சீரமைத்தல்' பண்புகளுக்கான சுருக்கெழுத்தாகப் பயன்படுத்தப்படுகிறது:
கிரிட் முறையைப் பயன்படுத்தி படம் div இன் மையத்தில் இருப்பதை வெளியீடு அங்கீகரிக்கிறது:
நிலை பண்புக்கூறைப் பயன்படுத்துதல்
மூல வகுப்பின் நிலையை ஒப்பீட்டு மதிப்பாகவும், பட வகுப்பை முழுமையான மதிப்பாகவும் அமைப்பதன் மூலம். படத்தை div இன் மையத்தில் காட்டலாம்:
.வேர் {நிலை: உறவினர்;
}
.படம் {
அகலம் : 700px;
உயரம் : 500px;
நிலை: முழுமையான;
விட்டு: ஐம்பது %;
உருமாற்றம்: translateX ( - ஐம்பது % ) ;
}
படம் '50%' இன் இடதுபுறமாக நகர்த்தப்பட்டு, X- அச்சில் '-50%' ஆக மாற்றப்படும். இது div இன் மையத்தில் கிடைமட்டமாக படத்தைக் காட்டுகிறது:
அப்படித்தான் படத்தை கிடைமட்டமாக div இல் மையப்படுத்த முடியும்.
முடிவுரை
ஒரு div உறுப்பில் படத்தை கிடைமட்டமாக அமைக்க, ' விளிம்பு ”,” நெகிழ்வு தொகுதி ”,” கட்ட அமைப்பு 'மற்றும்' நிலை 'பண்புகள். ' விளிம்பு 'இடது மற்றும் வலதுபுறத்தின் சொத்து ஆட்டோவாக அமைக்கப்பட்டுள்ளது. 'ஃப்ளெக்ஸ் மாட்யூல்' மற்றும் 'கிரிட் லேஅவுட்' ஆகியவை டிஸ்ப்ளேவை முறையே நெகிழ்வு மற்றும் கட்டமாக அமைத்து ' இடம் பொருள் 'படத்தை மையப்படுத்துவதற்கான சொத்து. நிலைப் பண்பு என்பது ரூட் கிளாஸுடன் தொடர்புடைய மதிப்பையும் பட வகுப்பிற்கு முழுமையான மதிப்பையும் அமைக்கிறது மற்றும் 'இடது' மற்றும் 'மாற்றம்' பண்புகளைப் பயன்படுத்துகிறது. இந்த வலைப்பதிவு ஒரு div இல் படங்களை எவ்வாறு கிடைமட்டமாக மையப்படுத்துவது என்பதை வெற்றிகரமாக நிரூபித்துள்ளது.