- Div में छवि को क्षैतिज रूप से कैसे केन्द्रित करें?
- मार्जिन संपत्ति
- फ्लेक्सबॉक्स मॉड्यूल
- ग्रिड व्यू लेआउट
- स्थिति विशेषता
Div में छवि को क्षैतिज रूप से कैसे केन्द्रित करें?
डेवलपर मार्जिन प्रॉपर्टी, फ्लेक्सबॉक्स मॉड्यूल, ग्रिड व्यू लेआउट और पोजीशन एट्रिब्यूट का उपयोग क्षैतिज रूप से एक छवि को केन्द्रित करने के लिए कर सकता है। Div टैग में छवि को क्षैतिज रूप से केंद्र में संरेखित करने के लिए नीचे दी गई मार्गदर्शिका का पालन करें।
मान लेते हैं, एक div है जिसमें HTML फाइल में इमेज को इस तरह से रखा गया है:
< डिव कक्षा = 'जड़' >
< आईएमजी स्रोत = '../book.jpg' ऊंचाई = 'पचास%' चौड़ाई = 'पचास%' कक्षा = 'छवि' >
< / डिव >
छवि को 50% की चौड़ाई और ऊंचाई और 'छवि' की एक श्रेणी मिल रही है।
मार्जिन संपत्ति का उपयोग करना
उपयोगकर्ता मार्जिन गुण का उपयोग करके HTML तत्वों के आसपास स्थान जोड़ सकते हैं। यह विंडो स्क्रीन का आकार बदलने के बाद उपलब्ध स्थान के अनुसार मार्जिन प्रदान करता है। उदाहरण के लिए, मार्जिन-लेफ्ट और राइट को ऑटो पर सेट करता है, और डिस्प्ले प्रॉपर्टी को ब्लॉक करने के लिए सेट किया जाता है:
आईएमजी {
प्रदर्शन क्षेत्र;
मार्जिन-लेफ्ट: ऑटो;
मार्जिन-राइट: ऑटो;
}
उपरोक्त उदाहरण को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट ने प्रदर्शित किया है कि छवि अब केंद्र में है।
फ्लेक्सबॉक्स मॉड्यूल का उपयोग करना
' flexbox ” एक मॉड्यूल है जिसमें गुणों का एक पूरा सेट होता है। हमारे मामले में, रूट एलिमेंट क्लास का चयन करें और डिस्प्ले प्रॉपर्टी के मान के रूप में फ्लेक्स का उपयोग करें। केंद्र को 'के मान के रूप में सेट करें' औचित्य-सामग्री ' और ' संरेखित-आइटम ' गुण:
।जड़ {डिस्प्ले: फ्लेक्स;
न्यायोचित ठहराना- संतुष्ट : केंद्र;
संरेखित-आइटम: केंद्र;
पृष्ठभूमि- रंग : नीला;
}
कोड निष्पादित करने के बाद वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट से पता चलता है कि छवि div के केंद्र में प्रदर्शित होती है जिसमें पृष्ठभूमि रंग 'नीला' पर सेट होता है।
ग्रिड व्यू लेआउट मॉड्यूल का उपयोग करना
ग्रिड व्यू लेआउट में 12 कॉलम हैं, और कुल चौड़ाई 100% पर सेट है और यह प्रत्येक तत्व को वेबपेज पर एक विशिष्ट स्थान पर रखता है:
।जड़ {प्रदर्शन: ग्रिड;
जगह-आइटम: केंद्र;
}
उपरोक्त कोड स्निपेट में, 'ग्रिड' मान प्रदर्शन संपत्ति को सौंपा गया है। जबकि 'स्थान-वस्तु' का उपयोग 'औचित्य-सामग्री' और 'संरेखित-आइटम' गुणों के लिए एक आशुलिपि के रूप में किया जाता है:
आउटपुट प्रमाणित करता है कि ग्रिड विधि का उपयोग करके छवि div के केंद्र में है:
स्थिति विशेषता का उपयोग करना
मूल वर्ग की स्थिति को सापेक्ष मान और छवि वर्ग को निरपेक्ष मान पर सेट करके। छवि को div के केंद्र में प्रदर्शित किया जा सकता है:
।जड़ {स्थिति: रिश्तेदार;
}
।छवि {
चौड़ाई : 700 पीएक्स;
ऊंचाई : 500पीएक्स;
स्थिति: निरपेक्ष;
बाएं: पचास %;
ट्रांसफॉर्म: ट्रांसलेटएक्स ( - पचास % ) ;
}
छवि को '50%' के बाईं ओर ले जाया जाता है और फिर एक्स-अक्ष पर '-50%' में बदल दिया जाता है। यह क्षैतिज रूप से div के केंद्र में छवि प्रदर्शित करता है:
इस प्रकार छवि को क्षैतिज रूप से div में केंद्रित किया जा सकता है।
निष्कर्ष
छवि को एक दिव्य तत्व में क्षैतिज रूप से सेट करने के लिए, 'का उपयोग करें' अंतर ”, “ फ्लेक्स मॉड्यूल ”, “ जाली का नक्शा ' और ' पद ' गुण। ' अंतर ” बाएँ और दाएँ की संपत्ति ऑटो पर सेट है। 'फ्लेक्स मॉड्यूल' और 'ग्रिड लेआउट' डिस्प्ले को क्रमशः फ्लेक्स और ग्रिड पर सेट करते हैं और ' जगह की वस्तु 'छवि को केंद्र में रखने की संपत्ति। स्थिति संपत्ति मूल वर्ग के सापेक्ष मूल्य और छवि वर्ग के लिए निरपेक्ष सेट करती है और 'बाएं' और 'रूपांतरण' गुणों का उपयोग करती है। इस ब्लॉग ने सफलतापूर्वक प्रदर्शित किया है कि छवियों को क्षैतिज रूप से एक div में कैसे केन्द्रित किया जाए।