सीएसएस का उपयोग करके किसी डिव को क्षैतिज रूप से कैसे केन्द्रित करें

सीएसएस का उपयोग करके किसी डिव को क्षैतिज रूप से कैसे केन्द्रित करें
सीएसएस का उपयोग करके किसी डिव को क्षैतिज रूप से कैसे केन्द्रित करें
Mia Chevalier
रविवार, 16 जून 2024 को 2:00:37 am

सीएसएस के साथ डिव संरेखण में महारत हासिल करना

सीएसएस में तत्वों को क्षैतिज रूप से केंद्रित करना एक सामान्य कार्य है जिसका सामना वेब डेवलपर्स को करना पड़ता है। चाहे वह एक बटन, एक छवि, या एक डिव को संरेखित करना हो, सही संरेखण प्राप्त करना कभी-कभी मुश्किल हो सकता है। इस गाइड में, हम a को क्षैतिज रूप से केन्द्रित करने के लिए विभिन्न तरीकों का पता लगाएंगे

दूसरे के भीतर
सीएसएस का उपयोग करना।

इन तकनीकों को समझकर और लागू करके, आप यह सुनिश्चित कर सकते हैं कि आपके वेब तत्व ठीक वहीं स्थित हैं जहाँ आप उन्हें चाहते हैं। आपको इस आवश्यक सीएसएस कौशल की व्यापक समझ देने के लिए हम फ्लेक्सबॉक्स, ग्रिड और पारंपरिक तरीकों सहित विभिन्न दृष्टिकोणों को कवर करेंगे।

आज्ञा विवरण
display: flex; एक फ्लेक्स कंटेनर को परिभाषित करता है और फ्लेक्सबॉक्स लेआउट को सक्षम करता है।
justify-content: center; एक फ्लेक्स कंटेनर के भीतर वस्तुओं को क्षैतिज रूप से केन्द्रित करें।
align-items: center; एक फ्लेक्स कंटेनर के भीतर वस्तुओं को लंबवत रूप से केन्द्रित करें।
place-items: center; ग्रिड कंटेनर में वस्तुओं को क्षैतिज और लंबवत दोनों रूप से केन्द्रित करें।
transform: translate(-50%, -50%); किसी तत्व को केंद्र में लाने के लिए उसकी अपनी चौड़ाई और ऊंचाई को 50% स्थानांतरित करता है।
position: absolute; किसी तत्व को उसके निकटतम स्थित पूर्वज के सापेक्ष स्थित करता है।
top: 50%; किसी तत्व को उसके युक्त तत्व के शीर्ष से 50% दूर रखता है।
left: 50%; किसी तत्व को उसके युक्त तत्व के बायीं ओर से 50% दूर रखता है।

फ्लेक्सबॉक्स, ग्रिड और पारंपरिक सीएसएस के साथ तत्वों को केंद्रित करना

पहली स्क्रिप्ट दर्शाती है कि a को कैसे केन्द्रित किया जाए

का उपयोग करते हुए Flexbox. व्यवस्थित करके display: flex; पैरेंट कंटेनर पर, चाइल्ड तत्व फ्लेक्स आइटम बन जाते हैं। justify-content: center; संपत्ति इन वस्तुओं को क्षैतिज रूप से केन्द्रित करती है, जबकि align-items: center; उन्हें लंबवत रूप से केन्द्रित करें। यह विधि अत्यधिक बहुमुखी है और गतिशील लेआउट के लिए अच्छा काम करती है।

दूसरी स्क्रिप्ट में, हम उपयोग करते हैं CSS Grid समान परिणाम प्राप्त करने के लिए. लगाने से display: grid; मूल कंटेनर के लिए और place-items: center;, बाल तत्व क्षैतिज और लंबवत दोनों तरह से केंद्रित होते हैं। यह विधि ग्रिड-आधारित लेआउट के लिए विशेष रूप से उपयोगी है। अंत में, पारंपरिक पद्धति में सेटिंग शामिल है position: absolute; बाल तत्व पर और उपयोग कर रहे हैं top: 50%; और left: 50%; साथ transform: translate(-50%, -50%); इसे माता-पिता के भीतर केन्द्रित करना। यह दृष्टिकोण निश्चित आकार के तत्वों के लिए प्रभावी है।

किसी डिव को क्षैतिज रूप से केन्द्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करना

फ्लेक्सबॉक्स के साथ 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>

सीएसएस ग्रिड के साथ एक डिव को केन्द्रित करना

ग्रिड लेआउट के साथ HTML और CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

सीएसएस के साथ केन्द्रित करने की पारंपरिक विधि

मार्जिन ऑटो के साथ 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; ब्लॉक-स्तरीय तत्वों को केन्द्रित करने के लिए संपत्ति। किसी तत्व के बाएँ और दाएँ मार्जिन को ऑटो पर सेट करके, आप इसे क्षैतिज रूप से इसके मूल कंटेनर के भीतर केन्द्रित कर सकते हैं। यह तकनीक सरल है और निश्चित-चौड़ाई वाले तत्वों के लिए अच्छा काम करती है। फ्लेक्सबॉक्स और ग्रिड जैसी आधुनिक सीएसएस लेआउट तकनीकों के साथ इन विधियों का संयोजन तत्वों को आवश्यकतानुसार सटीक रूप से संरेखित करने के लिए एक व्यापक टूलकिट प्रदान करता है।

तत्वों को केन्द्रित करने के बारे में सामान्य प्रश्न और उत्तर

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

सीएसएस केन्द्रीकरण तकनीकों का समापन

दृश्यमान रूप से आकर्षक वेब लेआउट बनाने के लिए विभिन्न सीएसएस विधियों का उपयोग करके तत्वों को क्षैतिज रूप से कैसे केंद्रित किया जाए, यह समझना आवश्यक है। जैसी तकनीकों में महारत हासिल करके Flexbox, Grid, और traditional CSS संपत्तियों के मामले में, डेवलपर्स यह सुनिश्चित कर सकते हैं कि उनके डिज़ाइन कार्यात्मक और सौंदर्य की दृष्टि से सुखदायक हों। इन तरीकों के साथ प्रयोग करने से सीएसएस क्षमताओं की गहरी समझ मिलेगी।