CSS सह Div संरेखन मास्टरिंग
CSS मध्ये घटक क्षैतिजरित्या केंद्रीत करणे हे वेब डेव्हलपर्सना आढळणारे एक सामान्य कार्य आहे. बटण, प्रतिमा किंवा div संरेखित करणे असो, परिपूर्ण संरेखन साध्य करणे कधीकधी अवघड असते. या मार्गदर्शकामध्ये, आम्ही क्षैतिज मध्यभागी a करण्यासाठी विविध पद्धती शोधू
ही तंत्रे समजून घेऊन आणि लागू करून, तुम्ही खात्री करू शकता की तुमचे वेब घटक तुम्हाला हवे त्या ठिकाणी आहेत. तुम्हाला या अत्यावश्यक CSS कौशल्याची सर्वसमावेशक समज देण्यासाठी आम्ही फ्लेक्सबॉक्स, ग्रिड आणि पारंपारिक पद्धतींसह विविध पद्धतींचा समावेश करू.
आज्ञा | वर्णन |
---|---|
display: flex; | फ्लेक्स कंटेनर परिभाषित करते आणि फ्लेक्सबॉक्स लेआउट सक्षम करते. |
justify-content: center; | फ्लेक्स कंटेनरमध्ये आयटम क्षैतिजरित्या मध्यभागी ठेवते. |
align-items: center; | फ्लेक्स कंटेनरमध्ये वस्तूंना अनुलंब मध्यभागी ठेवते. |
place-items: center; | ग्रिड कंटेनरमध्ये आयटम क्षैतिज आणि अनुलंब दोन्ही मध्यभागी ठेवतात. |
transform: translate(-50%, -50%); | घटकाला त्याच्या स्वतःच्या रुंदी आणि उंचीच्या 50% ने मध्यभागी हलवते. |
position: absolute; | घटकाला त्याच्या जवळच्या स्थानबद्ध पूर्वजाच्या सापेक्ष स्थान देते. |
top: 50%; | घटक असलेल्या घटकाच्या शीर्षापासून 50% वर स्थित आहे. |
left: 50%; | घटक असलेल्या घटकाच्या डावीकडून 50% स्थानावर ठेवते. |
फ्लेक्सबॉक्स, ग्रिड आणि पारंपारिक CSS सह घटक केंद्रीत करणे
पहिली स्क्रिप्ट मध्यभागी कशी ठेवायची हे दाखवते
दुसऱ्या स्क्रिप्टमध्ये, आम्ही वापरतो समान परिणाम साध्य करण्यासाठी. अर्ज करून मूळ कंटेनरला आणि , मूल घटक क्षैतिज आणि अनुलंब दोन्ही मध्यभागी आहेत. ही पद्धत विशेषतः ग्रिड-आधारित लेआउटसाठी उपयुक्त आहे. शेवटी, पारंपारिक पद्धतीमध्ये सेटिंग समाविष्ट आहे ७ मूल घटक आणि वापरण्यावर आणि सह ते पालकांमध्ये केंद्रीत करण्यासाठी. हा दृष्टिकोन निश्चित आकाराच्या घटकांसाठी प्रभावी आहे.
क्षैतिज मध्यभागी डिव्ह करण्यासाठी फ्लेक्सबॉक्स वापरणे
Flexbox सह HTML आणि CSS
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 1px solid black;
}
#inner {
padding: 20px;
background-color: lightblue;
border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
<div id="inner">Foo foo</div>
</div>
</body>
</html>
CSS ग्रिडसह Div केंद्रीत करणे
ग्रिड लेआउटसह HTML आणि CSS
१
CSS सह केंद्रीत करण्यासाठी पारंपारिक पद्धत
मार्जिन ऑटोसह HTML आणि CSS
<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
width: 100%;
height: 100vh;
border: 1px solid black;
position: relative;
}
#inner {
width: 50px;
padding: 20px;
background-color: lightcoral;
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
<div id="inner">Foo foo</div>
</div>
</body>
</html>
घटक केंद्रीत करण्यासाठी प्रगत तंत्रे
कंटेनरमध्ये घटक क्षैतिजरित्या केंद्रीत करण्याची दुसरी पद्धत वापरणे समाविष्ट आहे मालमत्ता. हा दृष्टिकोन विशेषतः इनलाइन-ब्लॉक किंवा इनलाइन घटकांसाठी प्रभावी आहे. अर्ज करून मूळ कंटेनरवर, सर्व मूल घटक क्षैतिजरित्या केंद्रीत केले जातील. तथापि, ही पद्धत ब्लॉक-स्तरीय घटकांसाठी कार्य करत नाही जोपर्यंत ते इनलाइन-ब्लॉकमध्ये रूपांतरित होत नाहीत.
याव्यतिरिक्त, आपण वापरू शकता ब्लॉक-स्तरीय घटक केंद्रीत करण्यासाठी मालमत्ता. घटकाचे डावे आणि उजवे समास स्वयंवर सेट करून, तुम्ही त्यास त्याच्या मूळ कंटेनरमध्ये क्षैतिजरित्या मध्यभागी ठेवू शकता. हे तंत्र सोपे आहे आणि निश्चित-रुंदीच्या घटकांसाठी चांगले कार्य करते. फ्लेक्सबॉक्स आणि ग्रिड सारख्या आधुनिक CSS लेआउट तंत्रांसह या पद्धती एकत्र केल्याने घटक आवश्यकतेनुसार अचूकपणे संरेखित करण्यासाठी एक व्यापक टूलकिट प्रदान करते.
- मी इनलाइन घटक कसे केंद्रीत करू?
- वापरा मूळ कंटेनरवर मध्यभागी इनलाइन घटक.
- मी मार्जिन वापरू शकतो: ऑटो; एक ब्लॉक घटक मध्यभागी करण्यासाठी?
- होय, सेटिंग डाव्या आणि उजव्या बाजूला एक ब्लॉक घटक मध्यभागी असेल.
- सेंटरिंगसाठी फ्लेक्सबॉक्स आणि ग्रिडमध्ये काय फरक आहे?
- एक-आयामी मांडणीसाठी वापरले जाते, तर द्विमितीय मांडणीसाठी आहे.
- मी CSS सह निश्चित-रुंदीचा घटक कसा केंद्रीत करू?
- वापरा किंवा सह
- मी Flexbox सह घटकांना अनुलंब मध्यभागी ठेवू शकतो का?
- होय, वापरा फ्लेक्स कंटेनरमध्ये घटकांना अनुलंब मध्यभागी ठेवा.
- मजकूर-संरेखित करते: केंद्र; ब्लॉक घटकांसाठी काम?
- नाही, फक्त इनलाइन किंवा इनलाइन-ब्लॉक घटकांसाठी कार्य करते.
- मी एका कंटेनरमध्ये अनेक घटक कसे केंद्रीत करू?
- वापरा सह आणि
- ठिकाण-वस्तू म्हणजे काय: केंद्र; ग्रिड मध्ये?
- ग्रिड कंटेनरमध्ये क्षैतिज आणि उभ्या दोन्ही गोष्टी केंद्रस्थानी ठेवतात.
- फ्लेक्सबॉक्स किंवा ग्रिडशिवाय घटकांना केंद्रस्थानी ठेवणे शक्य आहे का?
- होय, यासारख्या पद्धती वापरणे , , किंवा घटक केंद्रस्थानी देखील ठेवू शकतात.
CSS सेंटरिंग तंत्र गुंडाळणे
वेगवेगळ्या CSS पद्धतींचा वापर करून घटकांना क्षैतिजरित्या कसे केंद्रस्थानी ठेवायचे हे समजून घेणे दृष्यदृष्ट्या आकर्षक वेब लेआउट तयार करण्यासाठी आवश्यक आहे. सारख्या तंत्रांवर प्रभुत्व मिळवून , , आणि गुणधर्म, विकासक हे सुनिश्चित करू शकतात की त्यांची रचना कार्यशील आणि सौंदर्यदृष्ट्या सुखकारक आहे. या पद्धतींचा प्रयोग केल्याने CSS क्षमतांची सखोल माहिती मिळेल.