वेब पेज पर वस्तुओं की नियुक्ति इसके समग्र डिजाइन के लिए आवश्यक है। हालांकि लेआउट को प्रभावित करने के अन्य तरीके हैं, जैसे टेबल का उपयोग करना ( जिसे हम अनुशंसा नहीं करते हैं ), सबसे अच्छा सीएसएस का उपयोग करना है ।
नीचे, हम छवियों, तालिकाओं, अनुच्छेदों आदि को संरेखित करने के लिए एक सरल सीएसएस शैली इन-लाइन प्रॉपर्टी का उपयोग कैसे करें, इस पर एक नज़र डालेंगे।
नोट: इन तरीकों का उपयोग बाहरी स्टाइल शीट पर भी किया जा सकता है, लेकिन चूंकि ये अलग-अलग वस्तुओं पर लागू होते हैं और संभवतः इस तरह रहने की आवश्यकता होती है, इसलिए नीचे उल्लिखित जैसा स्टाइलिंग इनलाइन स्टाइल का उपयोग करना सबसे अच्छा है।
पाठ अनुच्छेद संरेखित करें
अनुच्छेद टैग आपके वेब पेज को डालने में शुरू करने वाला पहला स्थान है। यह खोलने और बंद करने वाले टैग इस तरह दिखते हैं:
अनुच्छेद में पाठ का डिफ़ॉल्ट संरेखण पृष्ठ के बाईं ओर है, लेकिन आप अपने पैराग्राफ को दाएं और केंद्र में भी संरेखित कर सकते हैं।
<पी शैली = "फ्लोट: दाएं;">फ्लोट प्रॉपर्टी का उपयोग करके आप अनुच्छेदों को मूल तत्व के दाएं या बाएं ओर संरेखित कर सकते हैं। उस मूल तत्व के अंदर कोई अन्य तत्व फ़्लोट किए गए तत्व के चारों ओर बह जाएगा।
अनुच्छेद के साथ सबसे अच्छा प्रभाव प्राप्त करने के लिए, पैराग्राफ पर चौड़ाई निर्धारित करना सर्वोत्तम है जो कंटेनर (पैरेंट) तत्व से छोटा है।
<पी शैली = "फ्लोट: बाएं; चौड़ाई: 150 पीएक्स;">पाठ के अंदर पैराग्राफ संरेखित करें
तर्कसंगत रूप से, अनुच्छेद पाठ के लिए सबसे दिलचस्प संरेखण "औचित्य" है, जो ब्राउज़र को विंडो के दाएं और बाएं किनारे दोनों के लिए आवश्यक रूप से संरेखित पाठ को प्रदर्शित करने के लिए कहता है।
अनुच्छेद में पाठ को औचित्य देने के लिए, आप टेक्स्ट-एलाइन गुण का उपयोग करेंगे।
<पी शैली = "पाठ-संरेखण: औचित्य;">आप पाठ-संरेखण संपत्ति का उपयोग कर, अनुच्छेद के अंदर सभी पाठ को दाईं ओर या बाएं (डिफ़ॉल्ट) पर भी संरेखित कर सकते हैं।
<पी शैली = "पाठ-संरेखण: दाएं;">पाठ-संरेखण गुण तत्व के अंदर पाठ को संरेखित करेगा। तकनीकी रूप से, यह अनुच्छेद या अन्य तत्व के अंदर मौजूद छवियों को संरेखित नहीं करना चाहिए, लेकिन अधिकांश ब्राउज़र इस संपत्ति के लिए इनलाइन के रूप में छवियों का इलाज करते हैं।
छवियों को संरेखित करना
एक छवि टैग पर फ्लोट प्रॉपर्टी का उपयोग करके आप पेज पर छवियों के प्लेसमेंट को परिभाषित कर सकते हैं और टेक्स्ट उनके चारों ओर कैसे लपेटेंगे।
उपर्युक्त पैराग्राफ की तरह, छवि टैग में फ्लोट स्टाइल प्रॉपर्टी पृष्ठ पर आपकी छवि को स्थान देगी और ब्राउजर को उस छवि के चारों ओर टेक्स्ट और अन्य तत्वों को कैसे प्रवाह करेगी।
उपर्युक्त छवि टैग के बाद पाठ स्क्रीन के बाईं ओर छवि प्रदर्शित होने के रूप में दाईं ओर छवि के चारों ओर बह जाएगा।
अगर मैं छवि को छवि के चारों ओर लपेटना बंद करना चाहता हूं, तो मैं स्पष्ट संपत्ति का उपयोग करता हूं:
पैराग्राफ से अधिक संरेखित
हालांकि, अगर आप केवल एक अनुच्छेद या छवि से अधिक संरेखित करना चाहते हैं तो क्या होगा? आप बस हर पैराग्राफ में एक स्टाइल प्रॉपर्टी डाल सकते हैं, लेकिन एक टैग है जिसका आप उपयोग कर सकते हैं जो अधिक प्रभावी है:
टैग और स्टाइल प्रॉपर्टी (फ्लोट या टेक्स्ट-एलाइन) के साथ टेक्स्ट और छवियों ( एचटीएमएल टैग सहित) को बस घुमाएं और उस डिवीजन में सब कुछ गठबंधन किया जाएगा कि आप इसे कैसे पसंद करेंगे।
ध्यान रखें कि विभाजन के भीतर पैराग्राफ या छवियों में जोड़े गए संरेखण टैग को ओवरराइड करने के लिए सम्मानित किया जाएगा।