वेब विकास में, तत्व के लेआउट को ठीक से बनाना महत्वपूर्ण है। हालाँकि, कई CSS गुण, जैसे कि CSS3 के लचीले बॉक्स, वेब पेजों और HTML तत्वों के लेआउट को समायोजित करने के लिए उपयोगी हैं। फ्लेक्सिबल बॉक्स का उपयोग वेब पेजों और एप्लिकेशन को पुनरावर्ती तरीके से व्यवस्थित करने के लिए किया जाता है। यह फ्लेक्सबॉक्स मोड जटिल वेब पेजों और एप्लिकेशन के लिए लेआउट बनाने में मदद करता है।
यह पोस्ट आपको CSS वर्टिकली का उपयोग करके सभी ब्राउज़रों के लिए एक div तत्व को केंद्रित करने के तरीके पर मार्गदर्शन करेगी।
CSS का उपयोग करके div Element को कैसे संरेखित करें?
डिव तत्व को प्रदर्शन संपत्ति का उपयोग करके लंबवत रूप से संरेखित किया जा सकता है ' मोड़ना 'सीएसएस के साथ' संरेखित-आइटम 'संपत्ति और' औचित्य-सामग्री ' संपत्ति। 'संरेखित-आइटम' गुण तत्व को लंबवत रूप से संरेखित करता है, और 'औचित्य-सामग्री' गुण सामग्री को क्षैतिज रूप से संरेखित करता है।
उदाहरण: सीएसएस के साथ एक दिव्य तत्व को लंबवत रूप से कैसे केन्द्रित करें?
HTML में, पहले 'जोड़ें' <दिव> 'तत्व और इसे वर्ग असाइन करें' मुख्य सामग्री ”। “
- ' स्रोत 'विशेषता का उपयोग छवि के यूआरएल को निर्दिष्ट करने के लिए किया जाता है।
- ' सब कुछ ” विशेषता कुछ पाठ को परिभाषित करती है जो छवि के स्थान पर प्रदर्शित होगी यदि यह लोड करने में विफल रहता है।
- ' चौड़ाई छवि की चौड़ाई को समायोजित करने के लिए विशेषता का उपयोग किया जाता है।
- फिर, 'जोड़ें' ” पृष्ठ पर अनुच्छेद एम्बेड करने के लिए तत्व।
यहाँ एचटीएमएल कोड है:
< डिव कक्षा = 'मुख्य सामग्री' >< आईएमजी स्रोत = '/images/laptop-notepad.jpg' सब कुछ = 'नोटपैड और पेन वाला लैपटॉप' चौड़ाई = '300' >
< पी > लैपटॉप एक पोर्टेबल कंप्यूटर भी जाना जाता है जैसा एक नोटबुक कंप्यूटर। पी >
डिव >
CSS में, हम div में कई स्टाइलिंग गुण निर्दिष्ट करेंगे।
शैली 'मुख्य-सामग्री' वर्ग
।मुख्य सामग्री {कद: पचास % ;
पीछे का रंग: #46C2CB;
फ़ॉन्ट-आकार: 24 पीएक्स;
पैडिंग: 10 पीएक्स;
}
निम्नलिखित सीएसएस गुणों को 'में परिभाषित किया गया है' मुख्य सामग्री ' कक्षा:
- ' कद ” संपत्ति का उपयोग कंटेनर की ऊंचाई को समायोजित करने के लिए किया जाता है।
- ' पीछे का रंग 'तत्व के पृष्ठभूमि रंग को परिभाषित करता है।
- ' फ़ॉन्ट आकार 'तत्व के फ़ॉन्ट आकार को निर्दिष्ट करता है।
- ' गद्दी ” संपत्ति तत्व की सामग्री के आसपास स्थान निर्धारित करती है।
आउटपुट से, आप देख सकते हैं कि div तत्व की सामग्री केंद्र में नहीं है:
आइए उन CSS गुणों को लागू करने के लिए आगे बढ़ें जो “को केंद्रित करने में मदद करते हैं <दिव> ”तत्व लंबवत। इन गुणों को वर्ग में जोड़ें ' मुख्य सामग्री ” जिनका उपयोग
तत्व तक पहुँचने के लिए किया जाता है: दिखाना: मोड़ना ;
संरेखित-आइटम: केंद्र;यहाँ विवरण है:
- ' दिखाना ' संपत्ति ' मोड़ना ' का उपयोग div लेआउट को उसके तत्व के लिए लचीला बनाने के लिए किया जाता है।
- ' संरेखित-आइटम 'सीएसएस संपत्ति' के रूप में सेट है केंद्र ”, जो div तत्वों को लंबवत रूप से संरेखित करेगा।
उत्पादन
आपने सीखा है कि कैसे सीएसएस का उपयोग करके सभी ब्राउज़रों के लिए एक दिव्य तत्व को लंबवत रूप से केन्द्रित किया जाता है।
निष्कर्ष
एक दिव्य तत्व को लंबवत रूप से केन्द्रित करने के लिए, CSS ' दिखाना 'संपत्ति का उपयोग' के साथ किया जाता है मोड़ना ' मूल्य। यह मान
कंटेनर को उसके तत्वों के लिए लचीला बनाता है। Div तत्व को लंबवत रूप से संरेखित करने के लिए, 'समायोजित करें' संरेखित-आइटम 'संपत्ति और इसे असाइन करें' केंद्र ' मूल्य। इस ब्लॉग ने आपको दिखाया है कि सभी ब्राउज़रों में div तत्वों को लंबवत रूप से केंद्रित करने के लिए CSS का उपयोग कैसे करें।