CSS वापरून Div क्षैतिजरित्या कसे केंद्र करावे

CSS वापरून Div क्षैतिजरित्या कसे केंद्र करावे
CSS वापरून Div क्षैतिजरित्या कसे केंद्र करावे
Mia Chevalier
रविवार, १६ जून, २०२४ रोजी २:२६:५४ म.पू.

CSS सह Div संरेखन मास्टरिंग

CSS मध्ये घटक क्षैतिजरित्या केंद्रीत करणे हे वेब डेव्हलपर्सना आढळणारे एक सामान्य कार्य आहे. बटण, प्रतिमा किंवा div संरेखित करणे असो, परिपूर्ण संरेखन साध्य करणे कधीकधी अवघड असते. या मार्गदर्शकामध्ये, आम्ही क्षैतिज मध्यभागी a करण्यासाठी विविध पद्धती शोधू

दुसर्या आत
CSS वापरून.

ही तंत्रे समजून घेऊन आणि लागू करून, तुम्ही खात्री करू शकता की तुमचे वेब घटक तुम्हाला हवे त्या ठिकाणी आहेत. तुम्हाला या अत्यावश्यक 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. सेटिंग करून १ मूळ कंटेनरवर, मूल घटक फ्लेक्स आयटम बनतात. द justify-content: center; मालमत्ता क्षैतिजरित्या या आयटम केंद्रे, तर align-items: center; त्यांना अनुलंब मध्यभागी ठेवते. ही पद्धत अत्यंत अष्टपैलू आहे आणि डायनॅमिक लेआउटसाठी चांगले कार्य करते.

दुसऱ्या स्क्रिप्टमध्ये, आम्ही वापरतो CSS Grid समान परिणाम साध्य करण्यासाठी. अर्ज करून ५ मूळ कंटेनरला आणि place-items: center;, मूल घटक क्षैतिज आणि अनुलंब दोन्ही मध्यभागी आहेत. ही पद्धत विशेषतः ग्रिड-आधारित लेआउटसाठी उपयुक्त आहे. शेवटी, पारंपारिक पद्धतीमध्ये सेटिंग समाविष्ट आहे ७ मूल घटक आणि वापरण्यावर top: 50%; आणि ९ सह transform: translate(-50%, -50%); ते पालकांमध्ये केंद्रीत करण्यासाठी. हा दृष्टिकोन निश्चित आकाराच्या घटकांसाठी प्रभावी आहे.

क्षैतिज मध्यभागी डिव्ह करण्यासाठी फ्लेक्सबॉक्स वापरणे

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>

घटक केंद्रीत करण्यासाठी प्रगत तंत्रे

कंटेनरमध्ये घटक क्षैतिजरित्या केंद्रीत करण्याची दुसरी पद्धत वापरणे समाविष्ट आहे text-align: center; मालमत्ता. हा दृष्टिकोन विशेषतः इनलाइन-ब्लॉक किंवा इनलाइन घटकांसाठी प्रभावी आहे. अर्ज करून text-align: center; मूळ कंटेनरवर, सर्व मूल घटक क्षैतिजरित्या केंद्रीत केले जातील. तथापि, ही पद्धत ब्लॉक-स्तरीय घटकांसाठी कार्य करत नाही जोपर्यंत ते इनलाइन-ब्लॉकमध्ये रूपांतरित होत नाहीत.

याव्यतिरिक्त, आपण वापरू शकता margin: auto; ब्लॉक-स्तरीय घटक केंद्रीत करण्यासाठी मालमत्ता. घटकाचे डावे आणि उजवे समास स्वयंवर सेट करून, तुम्ही त्यास त्याच्या मूळ कंटेनरमध्ये क्षैतिजरित्या मध्यभागी ठेवू शकता. हे तंत्र सोपे आहे आणि निश्चित-रुंदीच्या घटकांसाठी चांगले कार्य करते. फ्लेक्सबॉक्स आणि ग्रिड सारख्या आधुनिक CSS लेआउट तंत्रांसह या पद्धती एकत्र केल्याने घटक आवश्यकतेनुसार अचूकपणे संरेखित करण्यासाठी एक व्यापक टूलकिट प्रदान करते.

केंद्रस्थानी घटकांबद्दल सामान्य प्रश्न आणि उत्तरे

  1. मी इनलाइन घटक कसे केंद्रीत करू?
  2. वापरा text-align: center; मूळ कंटेनरवर मध्यभागी इनलाइन घटक.
  3. मी मार्जिन वापरू शकतो: ऑटो; एक ब्लॉक घटक मध्यभागी करण्यासाठी?
  4. होय, सेटिंग margin: auto; डाव्या आणि उजव्या बाजूला एक ब्लॉक घटक मध्यभागी असेल.
  5. सेंटरिंगसाठी फ्लेक्सबॉक्स आणि ग्रिडमध्ये काय फरक आहे?
  6. Flexbox एक-आयामी मांडणीसाठी वापरले जाते, तर १७ द्विमितीय मांडणीसाठी आहे.
  7. मी CSS सह निश्चित-रुंदीचा घटक कसा केंद्रीत करू?
  8. वापरा margin: auto; किंवा ७ सह transform: translate(-50%, -50%);
  9. मी Flexbox सह घटकांना अनुलंब मध्यभागी ठेवू शकतो का?
  10. होय, वापरा align-items: center; फ्लेक्स कंटेनरमध्ये घटकांना अनुलंब मध्यभागी ठेवा.
  11. मजकूर-संरेखित करते: केंद्र; ब्लॉक घटकांसाठी काम?
  12. नाही, text-align: center; फक्त इनलाइन किंवा इनलाइन-ब्लॉक घटकांसाठी कार्य करते.
  13. मी एका कंटेनरमध्ये अनेक घटक कसे केंद्रीत करू?
  14. वापरा १ सह justify-content: center; आणि align-items: center;
  15. ठिकाण-वस्तू म्हणजे काय: केंद्र; ग्रिड मध्ये?
  16. place-items: center; ग्रिड कंटेनरमध्ये क्षैतिज आणि उभ्या दोन्ही गोष्टी केंद्रस्थानी ठेवतात.
  17. फ्लेक्सबॉक्स किंवा ग्रिडशिवाय घटकांना केंद्रस्थानी ठेवणे शक्य आहे का?
  18. होय, यासारख्या पद्धती वापरणे margin: auto;, text-align: center;, किंवा ७ घटक केंद्रस्थानी देखील ठेवू शकतात.

CSS सेंटरिंग तंत्र गुंडाळणे

वेगवेगळ्या CSS पद्धतींचा वापर करून घटकांना क्षैतिजरित्या कसे केंद्रस्थानी ठेवायचे हे समजून घेणे दृष्यदृष्ट्या आकर्षक वेब लेआउट तयार करण्यासाठी आवश्यक आहे. सारख्या तंत्रांवर प्रभुत्व मिळवून Flexbox, १७, आणि traditional CSS गुणधर्म, विकासक हे सुनिश्चित करू शकतात की त्यांची रचना कार्यशील आणि सौंदर्यदृष्ट्या सुखकारक आहे. या पद्धतींचा प्रयोग केल्याने CSS क्षमतांची सखोल माहिती मिळेल.