HTML மற்றும் CSS உடன் DIV இல் படத்தை மையப்படுத்துவது எப்படி என்பதை அறிக

எப்படி என்பதை அறிய விரும்புகிறீர்களா? DIV இல் படத்தை மையப்படுத்தவும்? ஒரு படத்தை DIV இல் மையப்படுத்துவது உங்கள் வலைப்பக்கத்தின் தோற்றத்தையும் அமைப்பையும் மேம்படுத்தவும், நீங்கள் காட்ட விரும்பும் படத்தை முன்னிலைப்படுத்தவும் பயனுள்ளதாக இருக்கும். DIV இல் படத்தை மையப்படுத்தவும் கடினம் அல்ல, ஆனால் இது படத்தின் வகை, DIV இன் அளவு, DIV இன் பாணி போன்ற பல காரணிகளைச் சார்ந்துள்ளது.

இந்த கட்டுரையில் விளக்குவோம் HTML மற்றும் CSS ஐப் பயன்படுத்தி DIV இல் படத்தை மையப்படுத்துவது எப்படி, வலைப்பக்கங்களை உருவாக்க மற்றும் வடிவமைக்கப் பயன்படும் நிரலாக்க மொழிகள். நாங்கள் உங்களுக்கு பல முறைகளையும் எடுத்துக்காட்டுகளையும் காட்டப் போகிறோம், இதன் மூலம் உங்களுக்கு மிகவும் பொருத்தமான ஒன்றை நீங்கள் தேர்வு செய்யலாம்.

DIV என்றால் என்ன

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

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

ஒரு படத்தை கிடைமட்டமாக மையப்படுத்துவது எப்படி

DIV இல் ஒரு படத்தை கிடைமட்டமாக மையப்படுத்தவும் படத்தை மையத்தில் சீரமைத்தல் DIV இன் அகலம். இதைச் செய்ய பல வழிகள் உள்ளன, ஆனால் மிகவும் பொதுவானவை பின்வருமாறு:

• உரை-சீரமைப்பைப் பயன்படுத்துதல்: மையப் பண்பு. இந்த பண்பு DIV உறுப்புக்கு பயன்படுத்தப்படுகிறது மற்றும் DIV இல் உள்ள அனைத்து உறுப்புகளும் கிடைமட்டமாக மையமாக சீரமைக்கப்படும். உதாரணத்திற்கு:

• மார்ஜின் சொத்தை பயன்படுத்துதல்: ஆட்டோ. இந்தப் பண்பு IMG உறுப்பிற்குப் பயன்படுத்தப்பட்டு, படத்தை கிடைமட்டமாக மையப்படுத்தி, அதே இடது மற்றும் வலது ஓரங்களைக் கொண்டிருக்கும். இது வேலை செய்ய, படத்தில் வரையறுக்கப்பட்ட அகலம் இருக்க வேண்டும் மற்றும் வகை தொகுதியாக இருக்க வேண்டும் அல்லது சொத்துக் காட்சி: தொகுதி இருக்க வேண்டும். உதாரணத்திற்கு:

• மாற்றும் பண்புகளைப் பயன்படுத்துதல்: translateX(). இந்த பண்பு IMG உறுப்புக்கு பயன்படுத்தப்படுகிறது மற்றும் படத்தை அதன் அசல் நிலையில் இருந்து ஒரு குறிப்பிட்ட தூரத்திற்கு கிடைமட்டமாக நகர்த்துகிறது. அதை கிடைமட்டமாக மையப்படுத்த, அதன் அகலத்தில் 50% வலதுபுறமாக நகர்த்த வேண்டும். இது வேலை செய்ய, படத்தில் வரையறுக்கப்பட்ட அகலம் இருக்க வேண்டும் மற்றும் வகை தொகுதியாக இருக்க வேண்டும் அல்லது சொத்துக் காட்சி: தொகுதி இருக்க வேண்டும். உதாரணத்திற்கு:

ஒரு படத்தை செங்குத்தாக மையப்படுத்துவது எப்படி

DIV இல் படத்தை செங்குத்தாக மையப்படுத்தவும் DIV இன் உயரத்தின் மையத்தில் படத்தை சீரமைத்தல். இதைச் செய்ய பல வழிகள் உள்ளன, ஆனால் மிகவும் பொதுவானவை பின்வருமாறு:

• செங்குத்து-சீரமைப்பு பண்புகளைப் பயன்படுத்துதல்: நடுத்தர. இந்தப் பண்பு IMG உறுப்பிற்குப் பயன்படுத்தப்பட்டு, உரை அடிப்படையைப் பொறுத்து படத்தை செங்குத்தாக மையமாகச் சீரமைக்கும். இது வேலை செய்ய, DIV உறுப்பு வரையறுக்கப்பட்ட உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் IMG உறுப்பு இன்லைன் வகையாக இருக்க வேண்டும் அல்லது காட்சி: இன்லைன் சொத்து இருக்க வேண்டும். உதாரணத்திற்கு:

• விளிம்பு-மேல் மற்றும் விளிம்பு-கீழ் பண்புகளைப் பயன்படுத்துதல். இந்த பண்புகள் IMG உறுப்புக்கு பயன்படுத்தப்படுகின்றன, மேலும் படத்தை செங்குத்தாக மையப்படுத்தும் மேல் மற்றும் கீழ் ஒரே மாதிரியான விளிம்புகளைக் கொண்டிருக்கும். வேலை செய்ய, DIV உறுப்பு வரையறுக்கப்பட்ட உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் IMG உறுப்பு வரையறுக்கப்பட்ட உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் வகை தொகுதியாக இருக்க வேண்டும் அல்லது காட்சி: தொகுதி சொத்து இருக்க வேண்டும். உதாரணத்திற்கு:

• மாற்றும் பண்புகளைப் பயன்படுத்துதல்: translateY(). இந்த நேரத்தில் அது IMG உறுப்புக்கு பயன்படுத்தப்படுகிறது மற்றும் படத்தை அதன் அசல் நிலையில் இருந்து ஒரு குறிப்பிட்ட தூரத்திற்கு செங்குத்தாக நகர்த்துகிறது. அதை செங்குத்தாக மையப்படுத்த, அதன் உயரத்தில் 50% கீழே நகர்த்த வேண்டும். இது வேலை செய்ய, DIV உறுப்பு வரையறுக்கப்பட்ட உயரத்தையும், IMG உறுப்பு வரையறுக்கப்பட்ட உயரத்தையும் கொண்டிருக்க வேண்டும் மற்றும் வகை தொகுதியாக இருக்க வேண்டும் அல்லது காட்சி: தொகுதி சொத்து இருக்க வேண்டும். உதாரணத்திற்கு:

இரண்டு அச்சுகளிலும் படத்தை மையப்படுத்துவது எப்படி

ஒரு படத்தை இரண்டு அச்சுகளிலும் DIV இல் மையப்படுத்துவது என்பது பொருள் படத்தை அகலம் மற்றும் உயரம் இரண்டின் மையத்திலும் சீரமைக்கவும் DIV இல், இது மிகவும் சிக்கலானது. இதைச் செய்ய பல வழிகள் உள்ளன, ஆனால் மிகவும் பொதுவானவை பின்வருமாறு:

• உரை-சீரமைப்பு: மையப் பண்பு மற்றும் செங்குத்து-சீரமைப்பு: நடுத்தர சொத்து ஆகியவற்றைப் பயன்படுத்துதல். இந்த பண்புகள் முறையே DIV உறுப்பு மற்றும் IMG உறுப்புக்கு பொருந்தும், மேலும் படத்தை கிடைமட்டமாகவும் செங்குத்தாகவும் மையமாக சீரமைக்கும். இது வேலை செய்ய, DIV உறுப்பு வரையறுக்கப்பட்ட உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் IMG உறுப்பு இன்லைன் வகையாக இருக்க வேண்டும் அல்லது காட்சி: இன்லைன் சொத்து இருக்க வேண்டும். உதாரணத்திற்கு:

• மார்ஜின் சொத்தை பயன்படுத்துதல்: ஆட்டோ. இங்கே இது IMG உறுப்புக்கு பயன்படுத்தப்படுகிறது மற்றும் படத்தை நான்கு பக்கங்களிலும் சமமான விளிம்புகளைக் கொண்டிருக்கும், அதை இரு அச்சுகளிலும் மையப்படுத்துகிறது. வேலை செய்ய, DIV உறுப்பு வரையறுக்கப்பட்ட உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் IMG உறுப்பு வரையறுக்கப்பட்ட அகலம் மற்றும் உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் தொகுதி வகையாக இருக்க வேண்டும் அல்லது காட்சி: தொகுதி சொத்து இருக்க வேண்டும். உதாரணத்திற்கு:

• உருமாற்றத்தைப் பயன்படுத்தவும்: translate() பண்பு. இந்த வழக்கில், இது IMG உறுப்புக்கு பயன்படுத்தப்படுகிறது மற்றும் இரண்டு அச்சிலும் அதன் அசல் நிலையிலிருந்து ஒரு குறிப்பிட்ட தூரத்தை நகர்த்துகிறது. அதை மையப்படுத்த, அதன் அகலத்தில் 50% வலதுபுறமாகவும், உயரத்தில் 50% கீழேயும் நகர்த்த வேண்டும். வேலை செய்ய, DIV உறுப்பு வரையறுக்கப்பட்ட உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் IMG உறுப்பு வரையறுக்கப்பட்ட அகலம் மற்றும் உயரத்தைக் கொண்டிருக்க வேண்டும் மற்றும் தொகுதி வகையாக இருக்க வேண்டும் அல்லது காட்சி: தொகுதி சொத்து இருக்க வேண்டும். உதாரணத்திற்கு:

எந்த படத்தையும் மையப்படுத்தவும்

ஒரு படத்தை DIV இல் மையப்படுத்துவது பயனுள்ளதாக இருக்கும் உங்கள் வலைத்தளத்தின் தோற்றத்தையும் அமைப்பையும் மேம்படுத்த, மற்றும் நீங்கள் காட்ட விரும்பும் படத்தை முன்னிலைப்படுத்த. ஒரு படத்தை DIV இல் மையப்படுத்துவது கடினம் அல்ல, ஆனால் அது படத்தின் வகை, DIV அளவு, DIV இன் பாணி போன்ற பல காரணிகளைப் பொறுத்தது.

இந்த கட்டுரையில் HTML மற்றும் CSS ஐப் பயன்படுத்தி ஒரு படத்தை DIV இல் மையப்படுத்துவது எப்படி என்பதை நாங்கள் விளக்கியுள்ளோம், வலைப்பக்கங்களை உருவாக்க மற்றும் வடிவமைக்கப் பயன்படும் நிரலாக்க மொழிகள். நீங்கள் தேர்வு செய்ய பல்வேறு முறைகள் மற்றும் எடுத்துக்காட்டுகளை நாங்கள் உங்களுக்குக் காட்டியுள்ளோம். உங்களுக்கு மிகவும் பொருத்தமானது.

இந்தக் கட்டுரையை நீங்கள் விரும்பினீர்கள் என்று நம்புகிறோம், மேலும் DIV இல் படத்தை எப்படி மையப்படுத்துவது என்பதை நீங்கள் கற்றுக்கொண்டீர்கள். உங்களிடம் ஏதேனும் கேள்விகள் அல்லது பரிந்துரைகள் இருந்தால், எங்களுக்கு கருத்து தெரிவிக்கவும். இந்த கட்டுரையை உங்கள் நண்பர்கள் அல்லது குடும்பத்தினருடன் பகிர்ந்து கொள்ளலாம் HTML அல்லது CSS. வேலை மற்றும் திட்டமிடலுக்கு வருவோம்!