वेबसाइट तयार करताना केंद्र प्रतिमा, मजकूर आणि ब्लॉक घटक
जर आपण वेबसाईट कसे बनवावे हे शिकत असाल, तर मास्टर प्लॅन्टरमधील सर्वसाधारण युक्त्यांपैकी एक म्हणजे तुम्हाला ब्रॉंटर विंडोमध्ये कंटेंट कसे करावे. याचा अर्थ पृष्ठावर प्रतिमा मध्यभागी असणे किंवा हे डिझाइनच्या भाग म्हणून मथळे सारख्या मध्य-समर्थन मजकूर असू शकतात.
केंद्रस्थानी प्रतिमा किंवा मजकूर किंवा आपल्या संपूर्ण वेबपेजचे हे व्हिज्युअल स्वरूप पूर्ण करण्याचा योग्य मार्ग म्हणजे कॅस्केडिंग शैली पत्रके (सीएसएस) वापरून. केंद्रीकरणासाठी बहुतेक गुणधर्म आवृत्ती 1.0 पासून सीएसएसमध्ये आहेत, आणि ते CSS3 आणि आधुनिक वेब ब्राउझरसह उत्तम काम करतात.
वेब डिझाइनच्या अनेक पैलूंप्रमाणे, वेब पृष्ठावरील घटकांना सीएसएसमध्ये वापरण्यासाठी अनेक मार्ग आहेत. हे व्हिज्युअल लूक साध्य करण्यासाठी सीएसएस वापरण्याच्या काही वेगळ्या मार्गांवर नजर टाकूया.
HTML मध्ये सेंटर एलिमेंटसमध्ये CSS वापरणेचे विहंगावलोकन
सीएसएस सह सेंटरिंग वेब डिझायनर्सच्या सुरुवातीसाठी एक आव्हान असू शकते कारण या एक व्हिज्युअल स्टिल पूर्ण करण्याचे अनेक वेगवेगळ्या पद्धती आहेत. विविध पद्धतींनी छान किंवा अनुभवी वेब डेव्हलपर्स असू शकतात परंतु हे माहित नाही की सर्व तंत्र प्रत्येक घटकावर काम करत नाहीत, नवीन वेब व्यावसायिकांसाठी हे खूपच आव्हानात्मक असू शकते कारण विविध पद्धतींचा अर्थ असा आहे की कोणत्या पद्धतीचा वापर करावा हे जाणून घेणे आवश्यक आहे. काही पध्दती समजून घेणे सर्वात उत्तम गोष्ट आहे. आपण ते वापरणे सुरू करताच, आपण कोणत्या पद्धतीने कोणत्या पद्धतीने सर्वोत्तम कार्य करतो ते शिकू शकाल.
उच्च स्तरावर, आपण सीएसएस वापरू शकता:
- केंद्र मजकूर
- ब्लॉक-स्तरीय घटक केंद्रात (एक विभागातील)
- एक प्रतिमा केंद्रीत करा
- अनुलंब मध्यभागी एक ब्लॉक किंवा प्रतिमा
बरेच (अनेक) वर्षांपूर्वी, वेब डिझाइनर प्रतिमा आणि मजकूर केंद्रस्थानी
CSS सह मजकूर पाठविणे
वेबपृष्ठावर केंद्रस्थानी असलेली सर्वात सोपी गोष्ट मजकूर आहे. असे करण्यासाठी केवळ एक अशी शैली गुणधर्म आहे जी आपल्याला माहित असणे आवश्यक आहे: मजकूर-संरेखन खाली सीएसएस शैली घ्या, उदाहरणार्थ:
p.center {text-align: केंद्र; }
सीएसएसच्या या ओळीत, केंद्रवर्गासह लिहिलेले प्रत्येक परिच्छेद आतील बाजूस त्याच्या मूळ घटकामध्ये केंद्रित केले जातील. उदाहरणार्थ, जर पॅराग्राफ एखाद्या डिव्हिजनच्या आत असेल, म्हणजे ती त्या डिव्हिजनची मुल होती, तर ती
येथे HTML दस्तऐवजात लागू केलेल्या या वर्गाचे एक उदाहरण आहे:
हा मजकूर मध्यभागी आहे.
मजकूर-संरेखन संपत्तीसह मजकूर एकत्रित करताना, लक्षात ठेवा की हे त्याच्या समाविष्ट घटकामध्ये केंद्रीत केले जाईल आणि अपरिहार्यपणे संपूर्ण पृष्ठावरच केंद्रीत न राहता. हे सुद्धा लक्षात ठेवा की केंद्र-उचित मजकूर सामग्रीच्या मोठ्या ब्लॉक्ससाठी वाचणे कठीण होऊ शकते, म्हणून हे शैली मोकळेपणे वापरा लेख किंवा इतर सामग्रीसाठी टीझर मजकूर सारख्या ठळक बातम्या आणि लहान ब्लॉक्स, मध्यवर्ती असताना वाचण्यास आणि छान करण्यासाठी अनेकदा सोपे असतात परंतु मजकूरचा मोठा भाग, संपूर्ण लेखाप्रमाणेच, सामग्री पूर्णपणे केंद्रस्थानी असल्यास ती वापरणे आव्हानात्मक असेल. न्याय्य लक्षात ठेवा, वेबसाइट मजकूर येतो तेव्हा पठनीयता नेहमीच महत्त्वाची असते!
CSS सह सामग्रीचे केंद्रबिंदू अवरोधित करणे
ब्लॉक्स् आपल्या पृष्ठावरील काही घटक आहेत ज्यांची परिभाषित रूंदी आहे आणि ब्लॉक-स्तरीय घटक म्हणून स्थापित केलेली आहे. बर्याचदा, हे ब्लॉक्स HTML
div.center {
समास: 0 स्वयं;
रुंदीः 80 एएम;
}
मार्जिन प्रॉपर्टीसाठी हे CSS लघुलिपीने वर आणि खाली मार्जिन 0 च्या मानांवर सेट केले जाईल, तर डावा आणि उजवा "ऑटो" वापरेल. हे मूलत: कोणत्याही उपलब्ध जागा घेते आणि व्यूपोर्ट विंडोच्या दोन बाजूंमधे समान रीतीने विभाजित करते, प्रभावीपणे पृष्ठावरील घटक केंद्रित करीत आहे.
इथे HTML मध्ये लागू केले आहे:
परंतु त्यातील मजकूर डावीकडे संरेखित आहे.
जोपर्यंत आपल्या ब्लॉक्सची परिभाषित व्याप्ती आहे तोपर्यंत तो त्यास घटकाच्या घटकांमध्ये केंद्रित करेल. त्या ब्लॉकमधील मजकूर त्यात केंद्रित केला जाणार नाही, परंतु त्यास सोडले जाईल. हे वेब ब्राउझरमधील मजकूरास डिफॉल्ट रूपात बाकी आहे. आपण मजकूर मध्यवर्ती देखील पाहिजे असल्यास, आपण विभागात केंद्रित करण्यासाठी या पद्धतीने संयुक्तपणे जोडलेल्या मजकूर-संरेखन संपत्तीचा वापर करू शकता.
CSS सह प्रतिमा केंद्रित करणे
जरी बहुतेक ब्राऊझर मजकूर-संरेखन संपत्तीचा वापर करून केंद्रीकृत प्रतिमा प्रदर्शित करतील जे आम्ही आधीच परिच्छेदाकडे पाहिले आहेत, परंतु W3C ने त्याची शिफारस केलेली नाही म्हणून ती तंत्र वर विसंबून ठेवणे एक चांगली कल्पना नाही हे शिफारसित नसल्यामुळे, या पद्धतीकडे दुर्लक्ष करण्यासाठी भविष्यातील ब्राउजरची भविष्यातील आवृत्ती कदाचित निवडण्याची शक्यता आहे.
प्रतिमेचे केंद्र करण्यासाठी मजकूर-संरेखनाचा वापर करण्याऐवजी, आपण ब्राउझरला स्पष्टपणे सांगावे की प्रतिमा एक ब्लॉक-स्तर घटक आहे या मार्गाने, आपण कोणत्याही अन्य ब्लॉक म्हणून आपण हे केंद्र करू शकता. हे घडवून आणण्यासाठी सीएसएस आहे:
img.center {
प्रदर्शन: ब्लॉक;
समास-डावीकडे: स्वयं;
समास-उजवी: स्वयं;
}
आणि येथे HTML आहे जे आपण केंद्रीकृत करू इच्छित असलेल्या प्रतिमासाठी आहे:
आपण इन-लाइन सीएसएस (खाली पहा) वापरून ऑब्जेक्ट सेंटर देखील करू शकता, परंतु हा दृष्टिकोन शिफारसित नाही कारण तो आपल्या HTML मार्कअपमध्ये व्हिज्युअल स्टाइल जोडतो. लक्षात ठेवा, आम्ही शैली आणि रचना विभक्त करू इच्छित आहोत, त्यामुळे आपल्या HTML कोडमध्ये वेगळे करण्याच्या सीएसएस शैली जोडणे आणि, जसे की, शक्य तेव्हा हे टाळले पाहिजे.
CSS सह अनुलंब मध्यवर्ती घटक
वेब डिझाइनमध्ये लंबवर्तुळ ऑब्नॅक्टिंग ऑब्जेक्ट नेहमीच आव्हानात्मक होत चालले आहे, परंतु CSS3 मध्ये CSS फ्लेक्सिबल बॉक्स लेआउट मॉड्यूलच्या प्रकाशासह, आता ते करण्याचा एक मार्ग आहे.
अनुलंब संरेखन वरील आच्छादनात्मक संरेखनाप्रमाणे कार्य करते. CSS गुणधर्म मध्यम मूल्यासह वर्टिकल-संरेखन आहे.
.vcenter {
अनुलंब-संरेखन: मध्यभागी;
}
या दृष्टिकोनातून नकारात्मकतेमुळे सर्व ब्राउझर CSS FlexBox चे समर्थन करत नाही, परंतु या नवीन सीएसएस लेआउट पद्धतीमध्ये अधिकाधिक आल्या आहेत! खरेतर, आज सर्व आधुनिक ब्राऊझर आज या सीएसएस शैलीस समर्थन देत आहेत. याचा अर्थ फ्लेक्सबॉक्ससह आपल्या केवळ चिंता खूप जुन्या ब्राउझरची आवृत्ती असेल.
आपल्याला जुन्या ब्राऊझरसह समस्या असल्यास, W3C शिफारस करते की आपण खालील पद्धतीने कंटेनरमध्ये अनुलंब मजकूर लिहू शकता:
- घटकांना आत ठेवण्यासाठी घटकांना ठेवा, जसे की एक div.
- घटकांवर किमान उंची निश्चित करा
- घोषित करा की एक टेबल सेल म्हणून असलेले घटक.
- अनुलंब संरेखन "मध्य" वर सेट करा.
उदाहरणार्थ, येथे सीएसएस आहे:
.vcenter {
मि-उंची: 12 नेम;
प्रदर्शन: टेबल-सेल;
अनुलंब-संरेखन: मध्यभागी;
}
आणि इथे HTML आहे:
हा मजकूर बॉक्समध्ये अनुलंब केंद्रित आहे.
अनुलंब केंद्रित करणे आणि इंटरनेट एक्सप्लोररची जुन्या आवृत्त्या
इंटरनेट एक्स्प्लोरर (आयई) ला केंद्रस्थानी ठेवण्यासाठी काही मार्ग आहेत आणि नंतर सशर्त टिप्पण्यांचा वापर करतात जेणेकरून फक्त IE शैली पाहतील, परंतु ते थोडी शब्दशः आणि कुरुप आहेत. चांगली बातमी ही आहे की मायक्रोसॉफ्टने नुकतेच IE च्या जुन्या आवृत्तीसाठी समर्थन काढून टाकण्याचा निर्णय घेतला आहे, जे असमर्थित ब्राऊझर्स लवकरच वेब डेव्हलपरला सीएसएस फ्लेक्सबॉक्स सारख्या आधुनिक लेआउट पद्धतींचा वापर करण्यास सोपे करेल जे सर्व CSS लेआउट करेल, सर्व वेब डिझायनर्ससाठी फक्त केंद्रिय, अधिक सोपे नाही.