सीएसएस का उपयोग करके

Alice Dupont

शनिवार, 13 जुलाई 2024 को 9:25:01 pm

सीएसएस के साथ डिव के अंदर पाठ को लंबवत रूप से केन्द्रित करें

किसी डिव के भीतर टेक्स्ट को लंबवत रूप से संरेखित करना वेब डिज़ाइन में एक आम चुनौती हो सकती है। यह सुनिश्चित करना कि पाठ पूरी तरह से केंद्रित है, आपकी सामग्री के सौंदर्यशास्त्र और पठनीयता में सुधार कर सकता है।

इस लेख में, हम सीएसएस का उपयोग करके एक डिव के भीतर पाठ के ऊर्ध्वाधर केंद्रीकरण को प्राप्त करने के लिए विभिन्न तरीकों का पता लगाएंगे। हम एक सरल उदाहरण से शुरुआत करेंगे और फिर विभिन्न ब्राउज़रों और उपकरणों में अनुकूलता सुनिश्चित करने के लिए अधिक उन्नत तकनीकों पर ध्यान देंगे।

आज्ञा	विवरण
display: flex;	फ्लेक्सबॉक्स लेआउट के उपयोग को सक्षम करते हुए, एक फ्लेक्स कंटेनर को परिभाषित करता है।
justify-content: center;	फ्लेक्स आइटम को फ्लेक्स कंटेनर के भीतर क्षैतिज रूप से केन्द्रित करें।
align-items: center;	फ्लेक्स आइटम को फ्लेक्स कंटेनर के भीतर लंबवत रूप से केन्द्रित करता है।
display: grid;	ग्रिड लेआउट के उपयोग को सक्षम करते हुए, ग्रिड कंटेनर को परिभाषित करता है।
place-items: center;	ग्रिड कंटेनर के भीतर क्षैतिज और लंबवत दोनों तरह से वस्तुओं को केन्द्रित करता है।
display: table;	एक तत्व को तालिका के रूप में परिभाषित करता है, जिससे तालिका लेआउट गुणों को लागू किया जा सकता है।
display: table-cell;	ऊर्ध्वाधर संरेखण गुणों को सक्षम करते हुए, एक तत्व को तालिका सेल के रूप में परिभाषित करता है।
vertical-align: middle;	तालिका-सेल तत्व के भीतर सामग्री को लंबवत रूप से केन्द्रित करता है।
line-height: 170px;	टेक्स्ट के लंबवत केंद्र में लाइन की ऊंचाई को कंटेनर की ऊंचाई के बराबर सेट करता है।

सीएसएस के साथ पाठ को लंबवत रूप से केन्द्रित करने की तकनीकें

पहले स्क्रिप्ट उदाहरण में, हम उपयोग करते हैं display: flex; एक फ्लेक्स कंटेनर को परिभाषित करने के लिए। यह फ्लेक्सबॉक्स लेआउट गुणों के उपयोग को सक्षम बनाता है। व्यवस्थित करके justify-content: center; और align-items: center;, हम पाठ को क्षैतिज और लंबवत रूप से केन्द्रित कर सकते हैं

तत्व। यह विधि अत्यधिक प्रभावी और लागू करने में सरल है, जो इसे आधुनिक वेब डिज़ाइन के लिए एक लोकप्रिय विकल्प बनाती है। फ्लेक्सबॉक्स अपनी प्रतिक्रियाशीलता और संरेखण में आसानी के लिए विशेष रूप से उपयोगी है, जो डेवलपर्स को ऐसे लेआउट बनाने की अनुमति देता है जो विभिन्न स्क्रीन आकार और ओरिएंटेशन के लिए अच्छी तरह से अनुकूल होते हैं।

दूसरा स्क्रिप्ट उदाहरण सीएसएस ग्रिड लेआउट का उपयोग करके नियोजित करता है display: grid;. व्यवस्थित करके place-items: center;, पाठ ग्रिड कंटेनर के भीतर क्षैतिज और लंबवत दोनों तरह से केंद्रित है। सीएसएस ग्रिड पारंपरिक तरीकों की तुलना में वेब लेआउट डिजाइन करने के लिए अधिक शक्तिशाली और लचीली प्रणाली प्रदान करता है। यह आसानी से जटिल, प्रतिक्रियाशील डिज़ाइन बनाने की क्षमता प्रदान करता है। place-items: center; कमांड ऊर्ध्वाधर और क्षैतिज केंद्रीकरण प्राप्त करने, कोड को सरल बनाने और पठनीयता में सुधार करने का एक संक्षिप्त तरीका है।

वर्टिकल सेंटरिंग के लिए उन्नत सीएसएस तकनीकें

तीसरी स्क्रिप्ट में, हम टेबल डिस्प्ले विधि का उपयोग करते हैं। सेटिंग display: table; कंटेनर पर और display: table-cell; के साथ निर्मित एक छद्म तत्व पर ::before हमें इसका उपयोग करने की अनुमति देता है vertical-align: middle; संपत्ति। यह विधि तालिका कोशिकाओं के व्यवहार की नकल करती है, जिससे सामग्री को लंबवत रूप से केन्द्रित करना संभव हो जाता है। हालाँकि यह दृष्टिकोण आधुनिक वेब डिज़ाइन में कम उपयोग किया जाता है, यह पुराने ब्राउज़रों के साथ संगतता बनाए रखने या विरासत कोड से निपटने के लिए उपयोगी हो सकता है। यह नए लेआउट सिस्टम पर भरोसा किए बिना सामग्री को केन्द्रित करने का एक विश्वसनीय तरीका प्रदान करता है।

चौथी स्क्रिप्ट उदाहरण का उपयोग करता है line-height संपत्ति। सेटिंग करके line-height कंटेनर की ऊंचाई के बराबर, पाठ लंबवत केंद्रित है। यह तकनीक एकल-पंक्ति पाठ के लिए सीधी और प्रभावी है। हालाँकि, यह बहु-पंक्ति पाठ या गतिशील सामग्री के लिए उपयुक्त नहीं हो सकता है जहाँ कंटेनर की ऊंचाई बदल सकती है। अपनी सीमाओं के बावजूद, line-height यह विधि सरल परिदृश्यों में पाठ को लंबवत रूप से केंद्रित करने का एक त्वरित और आसान समाधान है।

वर्टिकल सेंटरिंग के लिए फ्लेक्सबॉक्स का उपयोग करना

सीएसएस फ्लेक्सबॉक्स

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

वर्टिकल सेंटरिंग के लिए ग्रिड का उपयोग करना

सीएसएस ग्रिड

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

वर्टिकल सेंटरिंग के लिए टेबल डिस्प्ले का उपयोग करना

सीएसएस तालिका प्रदर्शन

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

ऊर्ध्वाधर केन्द्रीकरण के लिए रेखा की ऊँचाई का उपयोग करना

सीएसएस लाइन ऊंचाई

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

वर्टिकल सेंटरिंग के लिए सीएसएस ट्रांसफॉर्म की खोज

पाठ को लंबवत रूप से केन्द्रित करने का एक और प्रभावी तरीका div सीएसएस का उपयोग कर रहा है transform संपत्ति। जोड़ने से position: absolute; साथ transform: translateY(-50%);, हम सटीक ऊर्ध्वाधर संरेखण प्राप्त कर सकते हैं। पहले div इसके लिए सेट है position: relative; एक संदर्भ बिंदु के रूप में कार्य करने के लिए. फिर, एक बाल तत्व के साथ position: absolute; मूल कंटेनर के शीर्ष 50% पर स्थित है। अंत में, आवेदन करना transform: translateY(-50%); तत्व को उसकी अपनी ऊंचाई से आधी ऊंचाई तक ले जाता है, उसे पूरी तरह से लंबवत केंद्रित करता है।

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

सीएसएस में वर्टिकल सेंटरिंग के बारे में सामान्य प्रश्न

किसी डिव में टेक्स्ट को लंबवत रूप से केन्द्रित करने का सबसे आसान तरीका क्या है?
का उपयोग करते हुए display: flex; साथ justify-content: center; और align-items: center; अक्सर सबसे आसान और सबसे प्रभावी तरीका होता है।
आप पुराने ब्राउज़र में टेक्स्ट को लंबवत रूप से कैसे केन्द्रित करते हैं?
तालिका प्रदर्शन विधि का उपयोग करना display: table; और vertical-align: middle; पुराने ब्राउज़र में वर्टिकल सेंटरिंग हासिल करने में मदद मिल सकती है।
क्या सीएसएस ग्रिड का उपयोग टेक्स्ट को लंबवत रूप से केन्द्रित करने के लिए किया जा सकता है?
हां, सीएसएस ग्रिड का उपयोग करके टेक्स्ट को लंबवत रूप से केन्द्रित किया जा सकता है display: grid; और place-items: center;.
क्या बहु-पंक्ति पाठ को लंबवत रूप से केन्द्रित करना संभव है?
हां, फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करके आसानी से एक कंटेनर के भीतर मल्टी-लाइन टेक्स्ट को लंबवत रूप से केंद्रित किया जा सकता है।
आप किसी ज्ञात कंटेनर ऊंचाई के साथ टेक्स्ट को लंबवत रूप से कैसे केन्द्रित करते हैं?
आप सेट कर सकते हैं line-height कंटेनर की ऊंचाई से मेल खाने वाली संपत्ति, पाठ को प्रभावी ढंग से केंद्रित करती है।
यदि कंटेनर की ऊंचाई गतिशील है तो क्या होगा?
फ्लेक्सबॉक्स, ग्रिड, या का उपयोग करना transform संपत्ति गतिशील कंटेनर ऊंचाइयों के साथ भी लगातार ऊर्ध्वाधर केंद्रीकरण सुनिश्चित करती है।
क्या उपयोग करने में कोई कमियां हैं? transform: translateY(-50%);?
प्रभावी होते हुए भी, इसके लिए माता-पिता का होना आवश्यक है position: relative; और फ्लेक्सबॉक्स या ग्रिड की तुलना में इसे लागू करना थोड़ा अधिक जटिल हो सकता है।
आप प्रतिक्रियाशील डिज़ाइन में टेक्स्ट को लंबवत रूप से कैसे केन्द्रित करते हैं?
रिस्पॉन्सिव डिज़ाइन के लिए फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करने की अत्यधिक अनुशंसा की जाती है, क्योंकि वे विभिन्न स्क्रीन आकार और ओरिएंटेशन के लिए अच्छी तरह से अनुकूल होते हैं।

ऊर्ध्वाधर केन्द्रीकरण पर अंतिम विचार

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

सीएसएस का उपयोग करके एक डिव में टेक्स्ट को लंबवत रूप से केंद्रित करना