வலைத்தளங்களை உருவாக்கும் போது சென்டர் படங்கள், உரை மற்றும் தடுப்பு கூறுகள்
வலைத்தளங்களை எவ்வாறு உருவாக்குவது என்பது உங்களுக்கு தெரிந்திருந்தால், உலாவியின் சாளரத்தில் உள்ள மைய உருப்படிகளுக்கு எப்படி மாஸ்டர் செய்ய வேண்டும் என்பது மிகவும் பொதுவான தந்திரங்களில் ஒன்றாகும். இது பக்கம் ஒரு படத்தை மையமாக குறிக்கலாம், அல்லது அது வடிவமைப்பு பகுதியாக தலைப்பு போன்ற தலைப்பு-நியாயப்படுத்தும் உரை இருக்க முடியும்.
மையப்படுத்தப்பட்ட படங்கள் அல்லது உரை அல்லது உங்கள் ஒட்டுமொத்த வலைப்பக்கத்தின் இந்த காட்சி தோற்றத்தை நிறைவேற்ற சரியான வழி அடுக்கு நடைத்தாள்கள் (CSS) பயன்படுத்தி உள்ளது. Centering பண்புகள் மிகவும் பதிப்பு 1.0 முதல் CSS இருந்து, அவர்கள் CSS3 மற்றும் நவீன வலை உலாவிகளில் பெரிய வேலை.
வலை வடிவமைப்பின் பல அம்சங்களைப் போல, வலைப்பக்கத்தில் மைய உறுப்புகளுக்கு CSS ஐப் பயன்படுத்த பல வழிகள் உள்ளன. இந்த காட்சி தோற்றத்தை அடைவதற்கு CSS ஐப் பயன்படுத்த சில வெவ்வேறு வழிகளில் பாருங்கள்.
HTML மைய மையங்களுக்கு CSS ஐ பயன்படுத்தி கண்ணோட்டத்தில்
CSS ஐ மையப்படுத்தி வலை வடிவமைப்பாளர்கள் தொடங்கி ஒரு சவாலாக இருக்கலாம், ஏனெனில் இந்த ஒரு காட்சி பாணியை நிறைவேற்றுவதற்கு பல வழிகள் உள்ளன. முறைகள் பலவற்றுக்கு நல்லது அல்லது அனுபவம் வாய்ந்த வலை உருவாக்குநர்களாக இருக்கலாம், ஆனால் எல்லா நுட்பங்களும் ஒவ்வொரு உறுப்புகளுடனும் வேலை செய்யாது என்று அறிந்தாலும், இது புதிய இணைய தொழில் நுட்பங்களை மிகவும் மோசமாக சவாலாகக் கொள்ளலாம், ஏனெனில் பல்வேறு வகையான முறைகள் எந்த அணுகுமுறையைப் பயன்படுத்த வேண்டும் என்பதை தெரிந்து கொள்ள வேண்டும். ஒரு சிறந்த அணுகுமுறை ஒரு சில அணுகுமுறைகளை புரிந்து கொள்ள வேண்டும். நீங்கள் அவற்றைப் பயன்படுத்தத் தொடங்குகையில், எந்த வகையைச் சிறந்த முறையில் செயல்படுத்துகிறீர்கள் என்பதை நீங்கள் அறிந்துகொள்வீர்கள்.
உயர் மட்டத்தில், நீங்கள் CSS ஐப் பயன்படுத்தலாம்:
- மையத்தின் உரை
- மையம் ஒரு தொகுதி நிலை உறுப்பு (ஒரு பிரிவு போன்ற)
- ஒரு படத்தை மையமாகக் கொண்டது
- செங்குத்து மையமாக ஒரு தொகுதி அல்லது படம்
பல (பல) ஆண்டுகளுக்கு முன்பு, வலை வடிவமைப்பாளர்கள் சென்டர் படங்கள் மற்றும் உரைக்கு
CSS ஐ மையமாகக் கொண்டது
ஒரு வலைப்பக்கத்தில் மையம் எளிதான விஷயம் உரை. Text-align: இதை செய்ய நீங்கள் தெரிந்து கொள்ள வேண்டிய ஒரே ஒரு பாணி சொத்து உள்ளது. கீழே உள்ள CSS பாணியை எடுத்துக் கொள்ளுங்கள்:
p.center {text-align: center; }
CSS இன் இந்த வரிசையில், சென்டர் வகுப்புடன் எழுதப்பட்ட ஒவ்வொரு பத்தியும் அதன் பெற்றோர் உறுப்புக்குள் கிடைமட்டமாக மையப்படுத்தப்படும். உதாரணமாக, பத்தி ஒரு பிரிவின் உள்ளே இருந்தால், அதாவது, அந்த பிரிவின் ஒரு குழந்தை என்று பொருள், அது
இங்கே HTML ஆவணத்தில் பயன்படுத்தப்படும் இந்த வர்க்கத்தின் ஒரு உதாரணம்:
இந்த உரை மையமாக உள்ளது.
Text-align சொத்துடனான உரையை மையமாகக் கொண்டிருக்கும் போது, அது அதன் உறுப்புக்குள் மையப்படுத்தப்பட வேண்டும் என்பதை நினைவில் கொள்ளவும், மேலும் முழு பக்கத்திற்குள் மையப்படுத்தப்பட வேண்டிய அவசியம் இல்லை என்பதை நினைவில் கொள்ளவும். மேலும் சென்டர் நியாயப்படுத்திய உரை உள்ளடக்கத்தின் பெரிய தொகுதிகள் படிக்க கடினமாக இருக்கலாம் என்பதை நினைவில் கொள்ளுங்கள், எனவே இந்த பாணியை மிகக் குறைவாக பயன்படுத்துங்கள். ஒரு கட்டுரை அல்லது பிற உள்ளடக்கத்திற்கான டீஸர் உரையைப் போலவே தலைப்பு மற்றும் சிறு தொகுதிகள், பெரும்பாலும் மையமாக இருக்கும் போது வாசிக்கவும் நன்றாகவும் இருக்கும், ஆனால் முழு கட்டுரையைப் போலவே, உரைகளின் பெரிய தொகுதிகள் உள்ளடக்கம் முழுமையாக மையமாக இருந்தால், நியாயமே. நினைவில் வைத்து கொள்ளுங்கள், வாசிப்பு எப்பொழுதும் முக்கியமானது , வலைத்தள உரை வரும் போது!
CSS உள்ளடக்கத்தை பிளாக்ஸ் மையமாக
பிளாக்ஸ் என்பது உங்கள் பக்கத்தின் வரையறுக்கப்பட்ட அகலத்தை கொண்டிருக்கும் மற்றும் தொகுதி-நிலை உறுப்பு என நிறுவப்படும். பெரும்பாலும், இந்த தொகுதிகள் HTML
div.center {
விளிம்பு: 0 கார்;
அகலம்: 80;
}
விளிம்புச் சொத்துக்கான இந்த CSS சுருக்கெழுத்து, மேல் மற்றும் கீழ் விளிம்புகளை 0 இன் மதிப்பிற்கு அமைக்கும், அதே நேரத்தில் இடது மற்றும் வலது "கார்." இது எந்தவொரு இடத்தையும் எடுத்துக் கொள்ளும், இது பார்வையாளரின் சாளரத்தின் இரு பக்கங்களுக்கும் இடையில் சமமாக பிரிக்கப்பட்டு, பக்கத்தில் உள்ள உறுப்புகளை மையமாகக் கொண்டிருக்கும்.
இங்கே இது HTML இல் பயன்படுத்தப்படுகிறது:
ஆனால் உள்ளே உள்ள உரை சீரமைக்கப்பட்டது.
உங்கள் தொகுதி ஒரு வரையறுக்கப்பட்ட அகலம் கொண்டிருக்கும் வரை, இது மையமாக இருக்கும் உறுப்பு உள்ளே. அந்தத் தொகுதியில் உள்ள உரை அதன் மையத்தில் மையப்படுத்தப்படாது, ஆனால் இடது-நியாயமானது. இது இணைய உலாவியில் இயல்புநிலையில் இடதுபுறம் நியாயப்படுத்தப்பட்டுள்ளது. உரை மையமாகவும் நீங்கள் விரும்பினால், நீங்கள் பிரிவில் மையமாக இந்த முறையுடன் இணைந்திருந்த உரை-அலினைச் சொத்துக்களைப் பயன்படுத்தலாம்.
CSS உடன் சென்டர் படங்கள்
பெரும்பாலான உலாவிகள் அதே உரை- align சொல்லைப் பயன்படுத்தி மையங்களைக் காண்பிக்கும் போது, நாங்கள் ஏற்கனவே பாராவில் பார்த்தோம், அது W3C பரிந்துரைக்கப்படாததால் அந்த நுட்பத்தை நம்புவதற்கு நல்லது அல்ல. இது பரிந்துரைக்கப்படவில்லை என்பதால், உலாவியின் எதிர்கால பதிப்புகள் இந்த முறையை புறக்கணிக்க எல்.எல்.
Text-align ஐ ஒரு படத்தை மையமாகப் பயன்படுத்துவதற்குப் பதிலாக, அந்த படத்தை உலாவி-நிலை உறுப்பு என்று உலாவிக்கு வெளிப்படையாக சொல்ல வேண்டும். இந்த வழியில், நீங்கள் எந்த வேறு தொகுதி என்று மையமாக முடியும். இது நடக்கும்படி இங்கே CSS உள்ளது:
img.center {
காட்சி: தடுப்பு;
விளிம்பு இடது: கார்;
விளிம்பு வலது: கார்;
}
இங்கே நாம் மையமாக இருக்க விரும்பும் படத்திற்கான HTML ஆகும்:
நீங்கள் உள்ள CSS கோப்பினை (கீழே காண்க) மைய மையப் பொருள்களால் கூட முடியும், ஆனால் இது உங்கள் HTML மார்க்கில் காட்சி பாணியை சேர்க்கும் என்பதால் இந்த அணுகுமுறை பரிந்துரைக்கப்படவில்லை. நினைவில் வைத்து கொள்ளவும், நாம் பாணி மற்றும் அமைப்பு பிரிக்க வேண்டும், எனவே பிரித்து அந்த உடைப்பு உங்கள் HTML குறியீட்டை CSS நடைகளை சேர்த்து, போன்ற, அது எப்போது தவிர்க்கப்பட வேண்டும்.
CSS உடன் செங்குத்தாக மையம் centering
சென்டர் பொருள்கள் செங்குத்தாக எப்போதும் வலை வடிவமைப்பு சவால், ஆனால் CSS இல் நெகிழ்வான பெட்டி வடிவமைப்பு தொகுதி வெளியீடு கொண்டு, அதை செய்ய ஒரு வழி இப்போது உள்ளது.
செங்குத்து சீரமைப்பு இதேபோல் மேலே மூடப்பட்ட கிடைமட்ட சீரமைப்பு. CSS சொத்து நடுத்தர மதிப்பு செங்குத்து-align உள்ளது.
.vcenter {
செங்குத்து-சீரமை: நடுத்தர;
}
இந்த அணுகுமுறை எதிர்மறையாக மேலும் புதிய CSS அமைப்பை முறை சுற்றி வரும் என்றாலும் அனைத்து உலாவிகளில், CSS FlexBox ஆதரவு இல்லை! உண்மையில், இன்று அனைத்து நவீன உலாவிகளும் இப்போது இந்த CSS பாணியை ஆதரிக்கின்றன. இதன் அர்த்தம் Flexbox உடன் உங்கள் ஒரே கவலை மிகவும் பழைய உலாவி பதிப்பாக இருக்கும்.
நீங்கள் பழைய உலாவிகளில் சிக்கல்களைக் கொண்டிருந்தால், W3C பின்வரும் வழிமுறையைப் பயன்படுத்தி ஒரு கொள்கலனில் சென்டர் உரை செங்குத்தாக பரிந்துரைக்கிறது:
- DIV போன்ற உறுப்பு உறுப்புக்குள் மையப்படுத்தப்படும் உறுப்புகளை வைக்கவும்.
- கொண்ட உறுப்பு மீது குறைந்தபட்ச உயரம் அமைக்கவும்.
- ஒரு அட்டவணையில் செல்லுபடியாகும் உறுதியைக் கொண்டிருங்கள்.
- "நடுத்தர" க்கு செங்குத்து சீரமைப்பு அமைக்கவும்.
உதாரணமாக, இங்கு CSS உள்ளது:
.vcenter {
குறைந்த உயரம்: 12 மணி;
காட்சி: அட்டவணை-செல்;
செங்குத்து-சீரமை: நடுத்தர;
}
இங்கே HTML:
இந்த உரை செங்குத்தாக பெட்டியில் மையமாக உள்ளது.
செங்குத்து மையம் மற்றும் Internet Explorer இன் பழைய பதிப்புகள்
இன்டர்நெட் எக்ஸ்புளோரர் (IE) ஐ மையமாக வைப்பதற்கு சில வழிகள் உள்ளன, பின்னர் IE ஐ மட்டும் பாணியைக் காண்கிறது, ஆனால் அவை ஒரு பிட் விர்போஸ் மற்றும் அசிங்கமானவை. நல்ல செய்தி IE பழைய பதிப்புகள் ஆதரவு கைவிட மைக்ரோசாப்ட் சமீபத்திய முடிவு, அந்த ஆதரவு உலாவிகளில் எளிதாக அனைத்து வலை அமைப்பை CSS CSS FlexBox போன்ற நவீன அமைப்பை அணுகுமுறைகள் பயன்படுத்த, வலை வடிவமைப்பாளர்கள் விரைவில் தங்கள் வழியில் இருக்க வேண்டும், அனைத்து இணைய வடிவமைப்பாளர்களுக்கும் மையமாக இருப்பது மட்டுமல்ல.