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

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

#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>

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

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

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

1. किसी डिव में टेक्स्ट को लंबवत रूप से केन्द्रित करने का सबसे आसान तरीका क्या है?
2. का उपयोग करते हुए साथ और अक्सर सबसे आसान और सबसे प्रभावी तरीका होता है।
3. आप पुराने ब्राउज़र में टेक्स्ट को लंबवत रूप से कैसे केन्द्रित करते हैं?
4. तालिका प्रदर्शन विधि का उपयोग करना और पुराने ब्राउज़र में वर्टिकल सेंटरिंग हासिल करने में मदद मिल सकती है।
5. क्या सीएसएस ग्रिड का उपयोग टेक्स्ट को लंबवत रूप से केन्द्रित करने के लिए किया जा सकता है?
6. हां, सीएसएस ग्रिड का उपयोग करके टेक्स्ट को लंबवत रूप से केन्द्रित किया जा सकता है और .
7. क्या बहु-पंक्ति पाठ को लंबवत रूप से केन्द्रित करना संभव है?
8. हां, फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करके आसानी से एक कंटेनर के भीतर मल्टी-लाइन टेक्स्ट को लंबवत रूप से केंद्रित किया जा सकता है।
9. आप किसी ज्ञात कंटेनर ऊंचाई के साथ टेक्स्ट को लंबवत रूप से कैसे केन्द्रित करते हैं?
10. आप सेट कर सकते हैं कंटेनर की ऊंचाई से मेल खाने वाली संपत्ति, पाठ को प्रभावी ढंग से केंद्रित करती है।
11. यदि कंटेनर की ऊंचाई गतिशील है तो क्या होगा?
12. फ्लेक्सबॉक्स, ग्रिड, या का उपयोग करना संपत्ति गतिशील कंटेनर ऊंचाइयों के साथ भी लगातार ऊर्ध्वाधर केंद्रीकरण सुनिश्चित करती है।
13. क्या उपयोग करने में कोई कमियां हैं? ?
14. प्रभावी होते हुए भी, इसके लिए माता-पिता का होना आवश्यक है और फ्लेक्सबॉक्स या ग्रिड की तुलना में इसे लागू करना थोड़ा अधिक जटिल हो सकता है।
15. आप प्रतिक्रियाशील डिज़ाइन में टेक्स्ट को लंबवत रूप से कैसे केन्द्रित करते हैं?
16. रिस्पॉन्सिव डिज़ाइन के लिए फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करने की अत्यधिक अनुशंसा की जाती है, क्योंकि वे विभिन्न स्क्रीन आकार और ओरिएंटेशन के लिए अच्छी तरह से अनुकूल होते हैं।

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