यह आलेख सीएसएस का उपयोग करके व्यावहारिक उदाहरणों के साथ एक div के सही संरेखण को प्रदर्शित करता है।
- CSS का उपयोग करके एक Div को राइट अलाइन कैसे करें?
- 'फ्लोट' संपत्ति का उपयोग करना
- 'सही' संपत्ति का उपयोग करना
- फ्लेक्स लेआउट का उपयोग करना
- ग्रिड लेआउट का उपयोग करना
CSS का उपयोग करके एक Div को राइट अलाइन कैसे करें?
डेवलपर प्रत्येक div तत्व या छवि को इस तरह से ठीक से संरेखित कर सकता है जो वेबसाइट को अधिक आकर्षक बनाता है। उनके उच्च लचीलेपन के कारण, वेब पेज पर कई तरह से div तत्वों का उपयोग किया जा सकता है जैसे पेज सेक्शन को परिभाषित करना, कॉलम बनाना और संबंधित सामग्री के रैपिंग सेट।
Div को राइट-एलाइन करने के लिए नीचे दिए गए तरीकों का पालन करें:
विधि 1: 'फ्लोट' संपत्ति का उपयोग करना
HTML फ़ाइल में, एक div बनाएँ और इसे 'की एक श्रेणी असाइन करें' अलाइन-टू-राइट ”। इस पूरे लेख में इस वर्ग और div का उपयोग किया गया है।
< डिव कक्षा = 'दाईं ओर संरेखित करें' >
< पी > यह कुछ सामग्री है। < / पी >
< / डिव >
अब, उस div वर्ग का चयन करें ' अलाइन-टू-राइट ” और सीएसएस गुणों को असाइन करें। बेहतर विज़ुअलाइज़ेशन के लिए इन गुणों का उपयोग किया जाता है:
.संरेखित करने के लिए सही {
सही नाव;
पैडिंग: 10 पीएक्स;
पृष्ठभूमि- रंग : हॉट गुलाबी;
}
उपरोक्त कोड में, ' तैरना 'संपत्ति दाईं ओर सेट है। यह वेबपेज पर डिव को सही दिशा में तैरता या घुमाता है। पैडिंग और पृष्ठभूमि-रंग गुण 'पर सेट हैं' 10 पीएक्स ' और ' हॉट गुलाबी ' क्रमश।
उपरोक्त कोड स्निपेट को संकलित करने के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट पुष्टि करता है कि div सही दिशा में चलता है।
विधि 2: 'सही' गुण का उपयोग करना
CSS में, div वर्ग का चयन करें और 'सेट करें' सही ” संपत्ति को 0. यह सुनिश्चित करता है कि दाईं ओर से चयनित div की दूरी शून्य के बराबर है। फिर, 'सेट करें पद 'को संपत्ति' शुद्ध 'डिव की स्थिति को ठीक करने के लिए। अंत में, बेहतर विज़ुअलाइज़ेशन के लिए कुछ स्टाइलिंग गुण लागू करें:
.संरेखित करने के लिए सही{
सही: 0 ;
स्थिति: निरपेक्ष;
पैडिंग: 10 पीएक्स;
पृष्ठभूमि- रंग : मध्यम बैंगनी;
}
कोड निष्पादित करने के बाद वेबपेज ऐसा दिखता है:
आउटपुट से पता चलता है कि div अब सही-गठबंधन है।
विधि 3: फ्लेक्स लेआउट का उपयोग करना
फ्लेक्स सबसे कुशल तरीका है, और यह विंडो के आकार बदलने के दौरान लेआउट को बनाए रखता है। CSS का उपयोग करके div को दाएँ-संरेखित किया जा सकता है ” फ्लेक्स लेआउट ' गुण। फ्लेक्स लेआउट में विभिन्न उद्देश्यों के लिए कई गुण होते हैं।
HTML फ़ाइल में एक पैरेंट डिव बनाएं और इसके अंदर दो सिबलिंग डिव बनाएं। साथ ही, प्रत्येक div को एक अद्वितीय वर्ग असाइन करें:
< डिव कक्षा = 'दाईं ओर संरेखित करें' >< डिव कक्षा = 'बाएं संरेखित' >
< पी > यह कुछ और है संतुष्ट < / पी >
< / डिव >
< डिव कक्षा = 'दाईं ओर संरेखित' >
< एच 1 >Hello From Linuxhin< / एच 1 >
< / डिव >
< / डिव >
अब अंदर ' <शैली> ” टैग निम्नलिखित सीएसएस गुण जोड़ें:
.संरेखित करने के लिए सही {डिस्प्ले: फ्लेक्स;
न्यायोचित ठहराना- संतुष्ट : अंतरिक्ष के बीच;
}
.दाईं ओर संरेखित {
अलाइन-सेल्फ: फ्लेक्स-एंड;
पैडिंग: 10 पीएक्स;
पृष्ठभूमि- रंग : मध्यम बैंगनी;
}
उपरोक्त कोड में,
- सौंपना ' मोड़ना 'और' अंतरिक्ष-बीच 'मूल्यों को' दिखाना ' और ' औचित्य-सामग्री ' गुण, क्रमशः। ये गुण डिव को एक फ्लेक्स बनाते हैं और चाइल्ड डिव के बीच समान अंतर रखते हैं।
- ' संरेखित करें 'संपत्ति' पर सेट है फ्लेक्स-एंड ”, जिसके कारण यह कंटेनर के दाईं ओर संरेखित हो जाता है।
उपरोक्त कोड को क्रियान्वित करने के बाद वेबपेज ऐसा दिखता है:
आउटपुट दिखाता है कि फ्लेक्स लेआउट का उपयोग करके div सही संरेखित है।
विधि 4: ग्रिड लेआउट का उपयोग करना
ग्रिड लेआउट का उपयोग div को राइट-एलाइन करने के लिए भी किया जा सकता है। HTML कोड संरचना समान रहती है:
.संरेखित करने के लिए सही {प्रदर्शन: ग्रिड;
ग्रिड-टेम्प्लेट-कॉलम: दोहराना ( 2 , 1फ्रा ) ;
}
.दाईं ओर संरेखित {
ग्रिड-स्तंभ- शुरू : 2 ;
पैडिंग: 10 पीएक्स;
पृष्ठभूमि- रंग : चैती;
}
कोड का विवरण नीचे दिया गया है:
- सबसे पहले, मूल div वर्ग का चयन करें ' .संरेखित करने के लिए सही 'और इसे सेट करें' दिखाना 'को संपत्ति' जाल ”।
- फिर, 'का उपयोग करके समान आकार वाले दो कॉलम बनाएं' ग्रिड-टेम्प्लेट-कॉलम ' करने के लिए सेट ' दोहराना (2, 1fr) ”।
- अंत में, चाइल्ड डिव क्लास चुनें “ .दाईं ओर संरेखित 'और सेट करें' ग्रिड-कॉलम-स्टार्ट ” संपत्ति 2। यह संपत्ति तत्व को दूसरे कॉलम से शुरू करती है, यानी दाईं ओर से।
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
आउटपुट दिखाता है कि div अब 'का उपयोग करके सही संरेखित है' जाल 'लेआउट गुण।
निष्कर्ष
Div को सही दिशा में संरेखित करने के लिए, 'का उपयोग करें' तैरना ”, “ सही ”, “ फ्लेक्स लेआउट ', और ' जाली का नक्शा ' गुण। ' तैरना 'संपत्ति मूल्य निर्दिष्ट करके दाईं ओर सेट होती है' 0 पीएक्स ”। के लिए ' मोड़ना 'प्रॉपर्टी, डिस्प्ले को फ्लेक्स पर सेट करें और' का उपयोग करें संरेखित करें 'को संपत्ति' फ्लेक्स-एंड ”। ग्रिड प्रॉपर्टी का उपयोग करके, दो समान आकार के कॉलम बनाएं और चाइल्ड डिव को दूसरे कॉलम से शुरू करें।