तुम्हाला कसे हे जाणून घ्यायला आवडेल DIV मध्ये प्रतिमा मध्यभागी ठेवा? DIV मध्ये प्रतिमा केंद्रीत करणे आपल्या वेब पृष्ठाचे स्वरूप आणि संस्था सुधारण्यासाठी आणि आपण प्रदर्शित करू इच्छित प्रतिमा हायलाइट करण्यासाठी उपयुक्त ठरू शकते. DIV मध्ये प्रतिमा मध्यभागी ठेवा कठीण नाही, परंतु ते अनेक घटकांवर अवलंबून असते जसे की प्रतिमा प्रकार, DIV आकार, DIV शैली इ.
या लेखात आम्ही स्पष्ट करू एचटीएमएल आणि सीएसएस वापरून DIV मध्ये प्रतिमा कशी मध्यभागी करावी, ज्या वेब पृष्ठे तयार करण्यासाठी आणि डिझाइन करण्यासाठी वापरल्या जाणार्‍या प्रोग्रामिंग भाषा आहेत. आम्ही तुम्हाला अनेक पद्धती आणि उदाहरणे दाखवणार आहोत जेणेकरुन तुम्ही तुमच्‍यासाठी सर्वात अनुकूल असलेली एक निवडू शकता.
DIV म्हणजे काय
div हा एक HTML घटक आहे जो वापरला जातो वेब पृष्ठावर विभाग किंवा कंटेनर तयार करा. यात इतर घटक असू शकतात, जसे की मजकूर, प्रतिमा, दुवे इ. याव्यतिरिक्त, हा एक ब्लॉक घटक आहे, याचा अर्थ असा आहे की तो पृष्ठाची संपूर्ण रुंदी व्यापतो आणि आपण त्याची उंची आणि रुंदी परिभाषित करू शकता. div हा एक सामान्य घटक आहे, म्हणजे त्याचा विशिष्ट अर्थपूर्ण अर्थ नाही. या कारणास्तव, div ला नाव किंवा श्रेणी देण्यासाठी हे सहसा वर्ग किंवा आयडी गुणधर्मांसह वापरले जाते. हे देखील अनेकदा वापरले जाते शैली विशेषता किंवा CSS शैली पत्रके सह, div ला एक देखावा किंवा मांडणी देण्यासाठी.
div चा वापर वेब पृष्ठाची सामग्री व्यवस्थित आणि संरचित करण्यासाठी आणि त्यावर शैली गुणधर्म लागू करण्यासाठी केला जातो. div सह तुम्ही एक बॉक्स तयार करू शकता ज्यामध्ये इतर घटक असतील आणि ते संरेखित, मध्यभागी, रंगीत, छायांकित इत्यादी असू शकतात. स्वरूप देखील वापरले जाऊ शकते स्तंभ किंवा पंक्ती तयार करा, सुव्यवस्थित आणि लवचिक मार्गाने सामग्री वितरीत करण्यासाठी. सर्वसाधारणपणे याचा वापर व्हिज्युअल किंवा परस्परसंवादी प्रभाव तयार करण्यासाठी देखील केला जाऊ शकतो, जसे की अॅनिमेशन, संक्रमण, परिवर्तन इ.
प्रतिमा क्षैतिजरित्या मध्यभागी कशी करावी
DIV मध्ये प्रतिमा आडव्या मध्यभागी ठेवा म्हणजे प्रतिमा मध्यभागी संरेखित करा DIV च्या रुंदीचा. हे करण्याचे अनेक मार्ग आहेत, परंतु सर्वात सामान्य खालील आहेत:
- मजकूर-संरेखित: केंद्र गुणधर्म वापरा. हा गुणधर्म DIV घटकावर लागू केला जातो आणि DIV मधील सर्व घटकांना मध्यभागी क्षैतिज संरेखित करतो. उदाहरणार्थ:
- मार्जिन वापरा: ऑटो प्रॉपर्टी. हा गुणधर्म IMG घटकावर लागू केला जातो आणि यामुळे प्रतिमेला डावीकडे आणि उजवीकडे समान समास असतात, जे त्यास क्षैतिजरित्या मध्यभागी ठेवतात. ते कार्य करण्यासाठी, प्रतिमेची परिभाषित रुंदी असणे आवश्यक आहे आणि ते प्रकार ब्लॉकचे असले पाहिजे किंवा गुणधर्म प्रदर्शन: ब्लॉक असणे आवश्यक आहे. उदाहरणार्थ:
- ट्रान्सफॉर्म गुणधर्म वापरा: translateX(). हा गुणधर्म IMG घटकावर लागू केला जातो आणि यामुळे प्रतिमा त्याच्या मूळ स्थितीपासून काही अंतरावर क्षैतिजरित्या हलते. ते क्षैतिज मध्यभागी ठेवण्यासाठी, तुम्हाला त्याच्या रुंदीच्या 50% उजवीकडे हलवावे लागेल. ते कार्य करण्यासाठी, प्रतिमेची परिभाषित रुंदी असणे आवश्यक आहे आणि ते प्रकार ब्लॉकचे असले पाहिजे किंवा गुणधर्म प्रदर्शन: ब्लॉक असणे आवश्यक आहे. उदाहरणार्थ:
प्रतिमा अनुलंब मध्यभागी कशी ठेवायची
DIV मध्ये प्रतिमा अनुलंब मध्यभागी ठेवा म्हणजे DIV च्या उंचीच्या मध्यभागी प्रतिमा संरेखित करा. हे करण्याचे अनेक मार्ग आहेत, परंतु सर्वात सामान्य खालील आहेत:
- vertical-align: मध्यम गुणधर्म वापरा. हा गुणधर्म IMG घटकावर लागू केला जातो आणि मजकूर बेसलाइनच्या संदर्भात प्रतिमा मध्यभागी-संरेखित केली जाते. हे कार्य करण्यासाठी, DIV घटकाची परिभाषित उंची असणे आवश्यक आहे आणि IMG घटक इनलाइन प्रकारातील असणे आवश्यक आहे किंवा डिस्प्ले: इनलाइन गुणधर्म असणे आवश्यक आहे. उदाहरणार्थ:
- मार्जिन-टॉप आणि मार्जिन-बॉटम गुणधर्म वापरा. हे गुणधर्म IMG घटकावर लागू केले जातात आणि प्रतिमेला वरच्या आणि खालच्या बाजूस समान मार्जिन असतात, जे त्यास अनुलंब मध्यभागी ठेवतात. हे कार्य करण्यासाठी, DIV घटकाची परिभाषित उंची असणे आवश्यक आहे आणि IMG घटकाची परिभाषित उंची असणे आवश्यक आहे आणि ते प्रकार ब्लॉकचे असले पाहिजे किंवा डिस्प्ले: ब्लॉक गुणधर्म असणे आवश्यक आहे. उदाहरणार्थ:
- ट्रान्सफॉर्म गुणधर्म वापरा: translateY(). यावेळी ते IMG घटकावर लागू केले जाते आणि प्रतिमा त्याच्या मूळ स्थानापासून काही अंतरावर अनुलंब हलवते. ते अनुलंब मध्यभागी ठेवण्यासाठी, तुम्हाला त्याच्या उंचीच्या 50% खाली हलवावे लागेल. हे कार्य करण्यासाठी, DIV घटकाची परिभाषित उंची असणे आवश्यक आहे आणि IMG घटकाची परिभाषित उंची असणे आवश्यक आहे आणि ते प्रकार ब्लॉकचे असले पाहिजे किंवा डिस्प्ले: ब्लॉक गुणधर्म असणे आवश्यक आहे. उदाहरणार्थ:
दोन्ही अक्षांवर प्रतिमा कशी मध्यभागी ठेवायची
DIV मध्ये दोन्ही अक्षांवर प्रतिमा केंद्रीत करणे म्हणजे रुंदी आणि उंची दोन्हीच्या मध्यभागी प्रतिमा संरेखित करा DIV पैकी, हे सर्वात जटिल आहे. हे करण्याचे अनेक मार्ग आहेत, परंतु सर्वात सामान्य खालील आहेत:
- मजकूर-संरेखित: मध्य गुणधर्म आणि अनुलंब-संरेखित: मध्यम गुणधर्म वापरा. हे गुणधर्म अनुक्रमे DIV घटक आणि IMG घटकाला लागू होतात आणि त्यामुळे प्रतिमा क्षैतिज आणि अनुलंब दोन्ही मध्यभागी संरेखित होते. हे कार्य करण्यासाठी, DIV घटकाची परिभाषित उंची असणे आवश्यक आहे आणि IMG घटक इनलाइन प्रकारातील असणे आवश्यक आहे किंवा डिस्प्ले: इनलाइन गुणधर्म असणे आवश्यक आहे. उदाहरणार्थ:
- मार्जिन वापरा: ऑटो प्रॉपर्टी. येथे ते IMG घटकावर लागू केले जाते आणि प्रतिमेच्या चारही बाजूंना समान समास बनवते, जे त्यास दोन्ही अक्षांवर केंद्र करते. हे कार्य करण्यासाठी, DIV घटकाची परिभाषित उंची असणे आवश्यक आहे आणि IMG घटकाची परिभाषित रुंदी आणि उंची असणे आवश्यक आहे आणि ते प्रकार ब्लॉकचे असले पाहिजे किंवा डिस्प्ले: ब्लॉक गुणधर्म असणे आवश्यक आहे. उदाहरणार्थ:
- transform: translate() गुणधर्म वापरा. या प्रकरणात ते IMG घटकावर लागू केले जाते आणि दोन्ही अक्षांमध्ये प्रतिमा त्याच्या मूळ स्थानापासून काही अंतर हलवते. त्याला मध्यभागी आणण्यासाठी, तुम्हाला त्याच्या रुंदीच्या 50% उजवीकडे आणि उंचीच्या 50% खाली हलवावे लागेल. हे कार्य करण्यासाठी, DIV घटकाची परिभाषित उंची असणे आवश्यक आहे आणि IMG घटकाची परिभाषित रुंदी आणि उंची असणे आवश्यक आहे आणि ते प्रकार ब्लॉकचे असले पाहिजे किंवा डिस्प्ले: ब्लॉक गुणधर्म असणे आवश्यक आहे. उदाहरणार्थ:
कोणतीही प्रतिमा मध्यभागी ठेवा
DIV मध्ये प्रतिमा केंद्रीत करणे उपयुक्त ठरू शकते आपल्या वेबसाइटचे स्वरूप आणि संस्था सुधारण्यासाठी, आणि आपण प्रदर्शित करू इच्छित प्रतिमा हायलाइट करण्यासाठी. DIV मध्ये प्रतिमा केंद्रीत करणे कठीण नाही, परंतु ते प्रतिमेचा प्रकार, DIV चा आकार, DIV ची शैली इत्यादी अनेक घटकांवर अवलंबून असते.
या लेखात एचटीएमएल आणि सीएसएस वापरून DIV मध्ये प्रतिमा कशी मध्यभागी करायची ते आम्ही स्पष्ट केले आहे, ज्या वेब पृष्ठे तयार करण्यासाठी आणि डिझाइन करण्यासाठी वापरल्या जाणार्‍या प्रोग्रामिंग भाषा आहेत. आम्ही तुम्हाला अनेक पद्धती आणि उदाहरणे दाखवली आहेत जेणेकरून तुम्ही निवडू शकता आपल्यास अनुकूल असलेले एक
आम्हाला आशा आहे की तुम्हाला हा लेख आवडला असेल आणि तुम्ही DIV मध्ये प्रतिमा कशी केंद्रीत करायची हे शिकलात. आपल्याकडे काही प्रश्न किंवा सूचना असल्यास, आम्हाला एक टिप्पणी द्या. तुम्ही हा लेख तुमच्‍या मित्रांसोबत किंवा कुटूंबियांसोबत शेअर करू शकता ज्यांना हे देखील आवडते HTML किंवा CSS. चला कामावर जा आणि प्रोग्राम करूया!