एक डिव के भीतर एक स्पैन को लंबवत रूप से कैसे केंद्रित करें

सीएसएस में लंबवत संरेखण भ्रमित करने वाला हो सकता है, और एक डिव के भीतर एक स्पैन को संरेखित करना कोई समस्या नहीं है अपवाद।

सीएसएस को समझना संरेखण

समाधान में उतरने से पहले, सीएसएस में ऊर्ध्वाधर संरेखण को समझना महत्वपूर्ण है:

• प्राकृतिक संरेखण: इनलाइन तत्व (जैसे स्पैन) स्वाभाविक रूप से होते हैं बेसलाइन पर संरेखित किया गया है, जो निम्नतम से नीचे है चरित्र।
• लाइन ऊंचाई: लाइन-ऊंचाई संपत्ति एक लाइन बॉक्स की ऊंचाई निर्धारित करती है, जो चरित्र और किसी भी अग्रणी स्थान दोनों को घेरती है।
• आंतरिक ऊंचाई: किसी तत्व की आंतरिक ऊंचाई वह स्थान है जो वह बिना किसी स्टाइल के घेरता है पैडिंग।

ऊर्ध्वाधर संरेखण तकनीक

एक डिव के भीतर एक स्पैन को लंबवत रूप से केंद्रित करने के लिए, इन तकनीकों पर विचार करें:

1. कंटेनर की ऊंचाई से लाइन की ऊंचाई का मिलान:

डिव की ऊंचाई से मेल खाने के लिए स्पैन की लाइन-ऊंचाई सेट करें। उदाहरण के लिए, यदि div 15px ऊंचा है, तो लाइन-ऊंचाई सेट करें: 15px; अवधि पर.

2. पूर्ण स्थिति निर्धारण:

स्थिति निर्धारित करें: पूर्ण; div और स्थिति पर: निरपेक्ष; शीर्ष: 50%; अवधि पर. फिर स्पैन के मार्जिन-टॉप मान को उसकी आंतरिक ऊंचाई के आधे तक समायोजित करें।

3. ट्रांसफ़ॉर्म: TranslateY

ट्रांसफ़ॉर्म का उपयोग करें: TranslateY(-50%); अवधि पर संपत्ति. यह लंबवत रूप से स्पान को उसकी आंतरिक ऊंचाई के आधे से बदल देता है।

4। फ्लेक्सबॉक्स

स्पैन को लंबवत रूप से केन्द्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करें। सेट डिस्प्ले: फ्लेक्स; संरेखित-आइटम: केंद्र; div और मार्जिन पर: ऑटो; विस्तार पर।

कोड नमूना

यहां लाइन-ऊंचाई विधि का उपयोग करके एक उदाहरण दिया गया है:

  as