ऊर्ध्वाधर-संरेखण संपत्ति के साथ लंबवत संरेखण

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

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

टैग को

के भीतर केन्द्रित करना चाहते हैं, तो लंबवत-संरेखण गुण को सीधे

पर लागू किया जाना चाहिए।व्यावहारिक उदाहरण

निम्नलिखित HTML और CSS कोड पर विचार करें:

HTML:

CSS:

#outer { ऊंचाई: 200px; पाठ-संरेखण: केंद्र; } #आंतरिक { प्रदर्शन: इनलाइन-ब्लॉक; ऊंचाई: 200px; लंबवत-संरेखित करें: मध्य; } #हेडर { प्रदर्शन: इनलाइन-ब्लॉक; }सहज रूप से, कोई उम्मीद कर सकता है कि

तत्व

तत्वों के भीतर लंबवत रूप से केंद्रित होगा। बहरहाल, मामला यह नहीं। इसका कारण समझने के लिए, यह याद रखना महत्वपूर्ण है कि ऊर्ध्वाधर संरेखण मूल तत्व के भीतर पंक्ति-दर-पंक्ति आधार पर होता है। इसलिए, यदि

तत्व की सामग्री एक पंक्ति से अधिक हो जाती है, तो

अपेक्षा के अनुरूप संरेखित नहीं होगा।

इस अवधारणा को स्पष्ट करने के लिए, हम HTML कोड को संशोधित कर सकते हैं: