वेबसाइटों का निर्माण करते समय केंद्र छवियों, पाठ, और ब्लॉक तत्व
यदि आप वेबसाइटों को बनाने का तरीका सीख रहे हैं, तो सबसे सामान्य चालों में से एक को मास्टर करने की आवश्यकता होगी ब्राउज़र ब्राउज़र में आइटम्स को कैसे केंद्रित करना है। इसका मतलब पृष्ठ पर एक छवि को केंद्रित करना हो सकता है, या यह डिज़ाइन के हिस्से के रूप में हेडलाइंस जैसे टेक्स्ट-ऑप्टीफाइंग टेक्स्ट हो सकता है।
केंद्रित छवियों या पाठ या यहां तक कि अपने पूरे वेबपृष्ठ के इस दृश्य रूप को पूरा करने का सही तरीका कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग कर है। सेंसरिंग के लिए अधिकांश गुण संस्करण 1.0 के बाद से सीएसएस में हैं, और वे CSS3 और आधुनिक वेब ब्राउज़र के साथ बहुत अच्छा काम करते हैं ।
वेब डिज़ाइन के कई पहलुओं की तरह, वेब पेज में केंद्र तत्वों के लिए सीएसएस का उपयोग करने के कई तरीके हैं। आइए इस विज़ुअल लुक को प्राप्त करने के लिए सीएसएस का उपयोग करने के कुछ अलग तरीकों पर नज़र डालें।
एचटीएमएल में केंद्र तत्वों के लिए सीएसएस का उपयोग करने के अवलोकन पर
सीएसएस के साथ केंद्रित वेब डिजाइनरों की शुरुआत के लिए एक चुनौती हो सकती है क्योंकि इस दृश्य शैली को पूरा करने के कई अलग-अलग तरीके हैं। जबकि विधियों की विविधता अच्छी या अनुभवी वेब डेवलपर्स हो सकती है जो जानते हैं कि सभी तकनीक हर तत्व पर काम नहीं करती हैं, यह नए वेब पेशेवरों के लिए बहुत ही चुनौतीपूर्ण हो सकती है क्योंकि विभिन्न तरीकों से इसका मतलब है कि उन्हें किस दृष्टिकोण का उपयोग करना है। कुछ दृष्टिकोणों को समझने के लिए सबसे अच्छी बात यह है कि। जैसे ही आप उनका उपयोग शुरू करते हैं, आप सीखेंगे कि कौन सी विधि सबसे अच्छी तरह से काम करती है।
उच्च स्तर पर, आप सीएसएस का उपयोग कर सकते हैं:
- केंद्र पाठ
- एक ब्लॉक-स्तरीय तत्व केंद्र (एक विभाजन की तरह)
- एक छवि केंद्र
- लंबवत रूप से एक ब्लॉक या एक छवि केंद्र
कई (कई) साल पहले, वेब डिज़ाइनर
सीएसएस के साथ पाठ केंद्रित
वेबपृष्ठ पर केंद्र करने की सबसे आसान बात टेक्स्ट है। ऐसा करने के लिए आपको केवल एक शैली की संपत्ति है: टेक्स्ट-संरेखण। नीचे सीएसएस शैली ले लो, उदाहरण के लिए:
पी। सेंसर {टेक्स्ट-एलाइन: सेंटर; }
सीएसएस की इस पंक्ति के साथ, केंद्र वर्ग के साथ लिखे गए प्रत्येक पैराग्राफ को अपने मूल तत्व के अंदर क्षैतिज रूप से केंद्रित किया जाएगा। उदाहरण के लिए, यदि अनुच्छेद एक विभाजन के अंदर था, जिसका अर्थ है कि यह उस विभाजन का बच्चा था, तो यह
एचटीएमएल दस्तावेज़ में लागू इस वर्ग का एक उदाहरण यहां दिया गया है:
<पी वर्ग = "केंद्र"> यह पाठ केंद्रित है।
पाठ-संरेखण संपत्ति के साथ टेक्स्ट को केंद्रित करते समय, याद रखें कि यह इसके तत्व के भीतर केंद्रित होगा और आवश्यक रूप से पूर्ण पृष्ठ के भीतर केंद्रित नहीं होगा। यह भी याद रखें कि सामग्री के बड़े ब्लॉक के लिए केंद्र-उचित पाठ को पढ़ना मुश्किल हो सकता है, इसलिए इस शैली का उपयोग कम से कम करें। किसी लेख या अन्य सामग्री के लिए टीज़र टेक्स्ट जैसे शीर्षक और छोटे ब्लॉक, केंद्रित होने पर अक्सर पढ़ने और ठीक करने के लिए आसान होते हैं, लेकिन पूर्ण लेख की तरह पाठ के बड़े ब्लॉक, यह उपभोग करने के लिए चुनौतीपूर्ण होगा कि सामग्री पूरी तरह से केंद्र है या नहीं न्यायसंगत। याद रखें, जब वेबसाइट टेक्स्ट की बात आती है तो पठनीयता हमेशा महत्वपूर्ण होती है!
सीएसएस के साथ सामग्री के केंद्र ब्लॉक
ब्लॉक आपके पृष्ठ पर कोई तत्व हैं जिनकी परिभाषित चौड़ाई है और ब्लॉक-स्तर तत्व के रूप में स्थापित की गई हैं। अक्सर, इन ब्लॉकों को HTML
div.center {
मार्जिन: 0 ऑटो;
चौड़ाई: 80em;
}
मार्जिन प्रॉपर्टी के लिए यह सीएसएस शॉर्टेंड शीर्ष और निचला मार्जिन 0 के मान पर सेट करेगा, जबकि बाएं और दाएं "ऑटो" का उपयोग करेंगे। यह अनिवार्य रूप से उपलब्ध कोई भी स्थान लेता है और व्यूपोर्ट विंडो के दोनों किनारों के बीच समान रूप से विभाजित करता है, जो प्रभावी रूप से पृष्ठ पर तत्व को केंद्रित करता है।
यहां यह HTML में लागू है:
लेकिन इसके अंदर का पाठ गठबंधन छोड़ दिया गया है।
जब तक आपके ब्लॉक की परिभाषित चौड़ाई हो, तब तक यह स्वयं तत्व के अंदर केंद्रित होगी। उस ब्लॉक में निहित पाठ इसके भीतर केंद्रित नहीं होगा, लेकिन बाएं-उचित होगा। यह becaus टेक्स्ट वेब ब्राउज़र में डिफ़ॉल्ट में बाएं-उचित है। यदि आप टेक्स्ट को भी केंद्रित करना चाहते हैं, तो आप टेक्स्ट-एलाइन गुण का उपयोग कर सकते हैं जिसे हमने पहले इस कवर के साथ विभाजन के केंद्र में कवर किया था।
सीएसएस के साथ छवियों को केंद्रित करना
जबकि अधिकांश ब्राउज़र उसी पाठ-संरेखण संपत्ति का उपयोग करके केंद्रित छवियों को प्रदर्शित करेंगे, हमने पहले से ही अनुच्छेद के लिए देखा है , डब्ल्यू 3 सी द्वारा अनुशंसित नहीं होने पर उस तकनीक पर भरोसा करना अच्छा विचार नहीं है। चूंकि इसकी अनुशंसा नहीं की जाती है, इसलिए हमेशा एक मौका होता है कि ब्राउज़र के भविष्य के संस्करण इस विधि को अनदेखा कर सकते हैं।
किसी छवि को केंद्र में टेक्स्ट-एलाइन का उपयोग करने के बजाय, आपको स्पष्ट रूप से ब्राउज़र को यह बताना चाहिए कि छवि एक ब्लॉक-स्तरीय तत्व है। इस तरह, आप इसे किसी भी अन्य ब्लॉक के रूप में केन्द्रित कर सकते हैं। ऐसा करने के लिए सीएसएस यहां दिया गया है:
img.center {
प्रदर्शन क्षेत्र;
मार्जिन बाएं: ऑटो;
मार्जिन-दाएं: ऑटो;
}
और यहां HTML है कि छवि के लिए हम केंद्रित होना चाहते हैं:
आप इन-लाइन सीएसएस (नीचे देखें) का उपयोग करके ऑब्जेक्ट्स को भी केंद्रित कर सकते हैं, लेकिन इस दृष्टिकोण की अनुशंसा नहीं की जाती है क्योंकि यह आपके HTML मार्कअप में दृश्य शैलियों को जोड़ती है। याद रखें, हम स्टाइल और स्ट्रक्चर को अलग करना चाहते हैं, इसलिए अलग-अलग ब्रेक के साथ अपने एचटीएमएल कोड में सीएसएस शैलियों को जोड़ना और, जैसे ही, जब भी संभव हो, इसे टालना चाहिए।
सीएसएस के साथ लंबवत तत्वों को केंद्रित करना
वेब डिज़ाइन में लंबवत ऑब्जेक्ट्स हमेशा चुनौतीपूर्ण रहा है, लेकिन CSS3 में सीएसएस फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल के रिलीज के साथ, अब ऐसा करने का एक तरीका है।
लंबवत संरेखण ऊपर कवर क्षैतिज संरेखण के समान काम करता है। सीएसएस संपत्ति मध्य मूल्य के साथ लंबवत-संरेखित है।
.center {
लंबवत-संरेखण: मध्य;
}
इस दृष्टिकोण का नकारात्मक पक्ष यह है कि सभी ब्राउज़र सीएसएस फ्लेक्सबॉक्स का समर्थन नहीं करते हैं, हालांकि इस नए सीएसएस लेआउट विधि के लिए अधिक से अधिक आ रहे हैं! वास्तव में, आज सभी आधुनिक ब्राउज़र इस सीएसएस शैली का समर्थन करते हैं। इसका मतलब है कि फ्लेक्सबॉक्स के साथ आपकी एकमात्र चिंताएं पुराने ब्राउज़र संस्करण होंगे।
यदि आपको पुराने ब्राउज़र के साथ समस्याएं हैं, तो डब्ल्यू 3 सी अनुशंसा करता है कि आप निम्न विधि का उपयोग करके कंटेनर में लंबवत टेक्स्ट को केंद्रित करें:
- तत्वों को एक तत्व के अंदर केंद्रित करने के लिए रखें, जैसे div।
- युक्त तत्व पर न्यूनतम ऊंचाई निर्धारित करें।
- घोषित करें कि तालिका कक्ष के रूप में तत्व युक्त है।
- ऊर्ध्वाधर संरेखण को "मध्य" पर सेट करें।
उदाहरण के लिए, यहां सीएसएस है:
.center {
न्यूनतम ऊंचाई: 12em;
प्रदर्शन: टेबल-सेल;
लंबवत-संरेखण: मध्य;
}
और यहां HTML है:
यह पाठ बॉक्स में लंबवत केंद्रित है।
वर्टिकल सेंटरिंग और इंटरनेट एक्सप्लोरर के पुराने संस्करण
इंटरनेट एक्सप्लोरर (आईई) को केंद्र में मजबूर करने के कुछ तरीके हैं और फिर सशर्त टिप्पणियों का उपयोग करें ताकि केवल आईई शैलियों को देख सके, लेकिन वे थोड़ा वर्बोज़ और बदसूरत हैं। अच्छी खबर यह है कि माइक्रोसॉफ्ट के आईई के पुराने संस्करणों के समर्थन को छोड़ने के हालिया फैसले के साथ, उन असमर्थित ब्राउज़रों को जल्द ही बाहर निकलना चाहिए, जिससे वेब डिज़ाइनरों के लिए सीएसएस फ्लेक्सबॉक्स जैसे आधुनिक लेआउट दृष्टिकोण का उपयोग करना आसान हो जाता है जो सभी सीएसएस लेआउट, न केवल केंद्रित, सभी वेब डिजाइनरों के लिए अधिक आसान है।