CSS वर्टिकल एलाइन के साथ वेब एलिमेंट्स को कैसे पोजिशन करें

गूगल खोज









प्राकृतिक दृश्य
विवरण:






जंगल

लोरेन इपसाम डलार सिट आमेट।






महासागर

लोरेन इपसाम डलार सिट आमेट।

HTML कोड ऊपर एक साधारण वेब पेज बनाता है जो चार तत्वों को प्रदर्शित करता है: लिंक्ड टेक्स्ट, एक इमेज, एक एम्बेडेड वीडियो और एक टेबल। यह आपके ब्राउज़र में इस तरह दिखना चाहिए:

टेक्स्ट को लंबवत रूप से कैसे संरेखित करें

डिफ़ॉल्ट रूप से, अधिकांश टेक्स्ट तत्व (जैसे शीर्षक,

, और

हालाँकि, कुछ पाठ तत्व जैसे कि और टैग इनलाइन हैं। नतीजतन, वे लंबवत-संरेखण संपत्ति का समर्थन करते हैं। टेक्स्ट को लंबवत रूप से संरेखित करने के लिए, बस CSS वर्टिकल-एलाइन प्रॉपर्टी के लिए उपयुक्त मान असाइन करें।

टेक्स्ट पर लंबवत-संरेखण शीर्ष मान का उपयोग करना

ए {
 लंबवत-संरेखण: शीर्ष;
}

जोड़ना सीएसएस कोड मूल HTML दस्तावेज़ के ऊपर के शीर्ष को संरेखित करेगा पंक्ति में सबसे ऊंचे तत्व के शीर्ष के साथ टेक्स्ट टैग करें। निम्नलिखित अद्यतन प्रदर्शन का निर्माण:

टेक्स्ट पर प्रतिशत मान का उपयोग करना

ए {
 लंबवत-संरेखण: -50%;
}

ऊपर दिया गया CSS टेक्स्ट एलिमेंट को उस स्थिति में संरेखित करता है जो मूल तत्व की आधार रेखा से 50% नीचे है। यह आपके ब्राउज़र में निम्न आउटपुट उत्पन्न करता है:

जैसा कि आप ऊपर की छवि में देख सकते हैं, पाठ तत्व छवि और वीडियो तत्वों के नीचे एक स्थान रखता है, जो एक ही पंक्ति में हैं। इस तत्व को आधार रेखा पर या उससे ऊपर रखने के लिए, सकारात्मक प्रतिशत मान का उपयोग करें।

पाठ पर लंबाई मान का उपयोग करना

ए {
 लंबवत-संरेखण: 90px;
}

उपरोक्त कोड मूल तत्व की आधार रेखा से 90px की लंबाई पर टेक्स्ट तत्व की आधार रेखा को संरेखित करता है। यह ब्राउज़र में निम्न आउटपुट उत्पन्न करता है:

छवियों को लंबवत रूप से कैसे संरेखित करें

टैग एक इनलाइन तत्व है, जिसके साथ CSS वर्टिकल-एलाइन प्रॉपर्टी अच्छी तरह से काम करती है।

छवियों पर लंबवत-संरेखित सुपर मान का उपयोग करना

आईएमजी {
 लंबवत-संरेखण: सुपर;
}

उपरोक्त कोड छवि को मूल तत्व के सुपरस्क्रिप्ट बेसलाइन पर रखता है। इसका मतलब बेसलाइन से ऊपर की स्थिति में है, जैसा कि आप निम्न आउटपुट में देख सकते हैं:

छवियों पर लंबवत-संरेखित प्रतिशत मान का उपयोग करना

आईएमजी {
 लंबवत-संरेखण: 25%;
}

उपरोक्त कोड छवि तत्व की आधार रेखा को मूल तत्व की आधार रेखा से 25% ऊपर संरेखित करता है। यह सुपर वैल्यू के निम्नलिखित दर्पण प्रभाव पैदा करता है:

छवियों पर लंबवत-संरेखित लंबाई मान का उपयोग करना

आईएमजी {
 लंबवत-संरेखण: 5px;
}

उपरोक्त कोड छवि तत्व की आधार रेखा को मूल तत्व की आधार रेखा से 5px ऊपर की स्थिति में संरेखित करता है। यह सुपर और 25% मानों के समान प्रभाव उत्पन्न करता है:

वीडियो और आईफ्रेम जैसे एम्बेडेड मीडिया इनलाइन एचटीएमएल तत्व हैं। इसलिए, CSS वर्टिकल-एलाइन प्रॉपर्टी उनके साथ बढ़िया काम करती है।

वीडियो पर वर्टिकल-अलाइन सुपर वैल्यू का उपयोग करना

वीडियो {
 लंबवत-संरेखण: उप;
}

उपरोक्त कोड वीडियो को मूल तत्व की सबस्क्रिप्ट बेसलाइन पर रखता है। इसका मतलब बेसलाइन के नीचे की स्थिति में है, जैसा कि आप निम्न आउटपुट में देख सकते हैं:

किसी वीडियो पर लंबवत-संरेखित प्रतिशत मान का उपयोग करना

वीडियो {
 लंबवत-संरेखण: -25%;
}

उपरोक्त कोड वीडियो तत्व की आधार रेखा को मूल तत्व की आधार रेखा से 25% नीचे संरेखित करता है। यह उप मान का निम्नलिखित दर्पण प्रभाव उत्पन्न करता है:

वीडियो पर लंबवत-संरेखित लंबाई मान का उपयोग करना

वीडियो {
 लंबवत-संरेखण: -5px;
}

उपरोक्त कोड छवि तत्व की आधार रेखा को मूल तत्व की आधार रेखा से 5px नीचे की स्थिति में संरेखित करता है। यह उप और -25% मानों की तरह प्रभाव पैदा करता है:

तालिका में आइटम को लंबवत रूप से कैसे संरेखित करें

तालिका के साथ लंबवत-संरेखण संपत्ति का उपयोग करना थोड़ा मुश्किल है, क्योंकि तालिका एक ब्लॉक तत्व है। हालांकि

तालिका डेटा पर लंबवत-संरेखित शीर्ष मान का उपयोग करना

टीडी {
 ऊंचाई: 40 पीएक्स;
 लंबवत-संरेखण: शीर्ष;
}

उपरोक्त कोड तालिका में प्रत्येक सेल में 40px की ऊंचाई जोड़ता है। यह तब प्रत्येक सेल में डेटा को प्रत्येक पंक्ति के शीर्ष पर संरेखित करता है। यह ब्राउज़र में निम्न आउटपुट उत्पन्न करता है:

तालिका डेटा पर लंबवत-संरेखित मध्य मान का उपयोग करना

टीडी {
 ऊंचाई: 40 पीएक्स;
 लंबवत-संरेखण: मध्य;
}

उपरोक्त कोड में लंबवत-संरेखित मध्य मान प्रत्येक सेल के भीतर डेटा को लंबवत रूप से केंद्रित करता है। यह ब्राउज़र में निम्न आउटपुट उत्पन्न करता है:

तालिका डेटा पर लंबवत-संरेखण नीचे मान का उपयोग करना

टीडी {
 ऊंचाई: 40 पीएक्स;
 लंबवत-संरेखण: नीचे;
}

उपरोक्त कोड प्रत्येक सेल में डेटा को प्रत्येक पंक्ति के नीचे संरेखित करता है। यह ब्राउज़र में निम्न आउटपुट उत्पन्न करता है:

अब आप अपने वेबपेज पर तत्वों को संरेखित कर सकते हैं

अब आप CSS वर्टिकल-एलाइन प्रॉपर्टी का उपयोग टेक्स्ट, एम्बेडेड मीडिया और टेबल डेटा सहित विभिन्न इनलाइन तत्वों के एक होस्ट के साथ कर सकते हैं। सामान्य नियम यह है कि लंबवत-संरेखण संपत्ति केवल इनलाइन और इनलाइन-ब्लॉक तत्वों पर काम करती है।

हालाँकि, आप इस संपत्ति का उपयोग ब्लॉक तत्वों पर कर सकते हैं, आपको पहले उन्हें इनलाइन या इनलाइन-ब्लॉक तत्वों में बदलने की आवश्यकता है। याद रखें कि आप लंबवत-संरेखण को अन्य संरेखण गुणों, जैसे पाठ-संरेखण के साथ जोड़ सकते हैं।

लेखक के बारे में

कदीशा कीन (52 लेख प्रकाशित)

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

कदीशा कीन की अन्य फ़िल्में-टीवी शो