यह आलेख दर्शाता है कि फ्लेक्सबॉक्स के अंदर पाठ को लंबवत रूप से कैसे संरेखित करें:
विधि 1: 'संरेखित-आइटम' गुण का उपयोग करना
पाठ को लंबवत रूप से संरेखित करने के लिए, उपयोगकर्ता 'का उपयोग कर सकते हैं' संरेखित-आइटम CSS द्वारा प्रदान की गई संपत्ति। यह तत्वों को फ्लेक्सबॉक्स के अंदर अपना संरेखण सेट करने में मदद करता है। संभावित ऊर्ध्वाधर संरेखण स्थिति 'पर हो सकती है' ऊपर ”, मध्य ', या ' तल ' ओर।
इन दिशाओं में तत्वों को संरेखित करने के लिए व्यावहारिक प्रदर्शन नीचे दिए गए हैं:
उदाहरण 1: शीर्ष स्थान
फ्लेक्सबॉक्स के अंदर पाठ को शीर्ष स्थिति में संरेखित करने के लिए, ' फ्लेक्स-स्टार्ट ' मूल्य प्रदान किया जाता है ' संरेखित-आइटम ' संपत्ति। यह संपत्ति मुख्य डिव को सौंपी गई है जिसे फ्लेक्स के रूप में प्रदर्शित किया जाएगा। आइए मान लें, 'की कक्षा के साथ div खड़ा ” HTML फ़ाइल में बनाया गया है। फिर CSS फ़ाइल में, उस वर्ग का चयन करें और निम्नलिखित गुण असाइन करें:
।खड़ा {
रंग : सफ़ेद ;
ऊंचाई : 150 पीएक्स ;
दिखाना : मोड़ना ;
गद्दी छूट गई : 20 पीएक्स ;
संरेखित-आइटम : फ्लेक्स-स्टार्ट ;
पृष्ठभूमि का रंग : हरे जंगल ;
}
- सबसे पहले, सीएसएस के रंग, पृष्ठभूमि-रंग और ऊंचाई गुणों का उपयोग करके div को मूल स्टाइल और संरेखण दिया जाता है।
- इसे फ्लेक्सबॉक्स बनाने के लिए 'डिस्प्ले' प्रॉपर्टी को 'फ्लेक्स' पर भी सेट किया गया है।
- अंत में, फ्लेक्सबॉक्स की शुरुआत में टेक्स्ट प्रदर्शित करने के लिए, 'संरेखित-आइटम' गुण को 'फ्लेक्स-स्टार्ट' पर सेट करें।
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
आउटपुट प्रदर्शित करता है कि टेक्स्ट अब फ्लेक्सबॉक्स के अंदर शीर्ष स्थान पर संरेखित है।
उदाहरण 2: मध्य स्थिति
पाठ को बीच की स्थिति में लंबवत रूप से संरेखित करने के लिए, 'सेट करें' केंद्र 'सीएसएस के लिए मूल्य' संरेखित-आइटम ' संपत्ति:
।खड़ा {रंग : सफ़ेद ;
ऊंचाई : 150 पीएक्स ;
दिखाना : मोड़ना ;
गद्दी छूट गई : 20 पीएक्स ;
संरेखित-आइटम : केंद्र ;
पृष्ठभूमि का रंग : हरे जंगल ;
}
उपरोक्त कोड के निष्पादन के बाद:
उपरोक्त आउटपुट प्रदर्शित करता है कि टेक्स्ट अब फ्लेक्सबॉक्स के केंद्र में संरेखित है।
उदाहरण 3: निचला स्थान
टेक्स्ट को फ्लेक्सबॉक्स के नीचे सेट करने के लिए, “ असाइन करें फ्लेक्स-एंड 'के लिए मूल्य' संरेखित-आइटम ' संपत्ति। इस बार टेक्स्ट उस स्थिति में संरेखित हो जाता है जहां फ्लेक्सबॉक्स समाप्त हो रहा है मतलब नीचे की तरफ:
।खड़ा {रंग : सफ़ेद ;
ऊंचाई : 150 पीएक्स ;
दिखाना : मोड़ना ;
गद्दी छूट गई : 20 पीएक्स ;
संरेखित-आइटम : फ्लेक्स-एंड ;
पृष्ठभूमि का रंग : हरे जंगल ;
}
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट प्रदर्शित करता है कि पाठ अब नीचे की स्थिति में लंबवत रूप से संरेखित है।
विधि 2: 'औचित्य-सामग्री' संपत्ति का उपयोग करना
' औचित्य-सामग्री ” संपत्ति का उपयोग फ्लेक्सबॉक्स के अंदर पाठ को लंबवत रूप से संरेखित करने के लिए भी किया जा सकता है। हालाँकि, यह 'के समान ही काम करता है पाठ संरेखित ” संपत्ति और यह पंक्ति दिशा में तत्वों को संरेखित करता है। तो, संरेखण की दिशा बदलने के लिए, ' फ्लेक्स-दिशा 'संपत्ति का उपयोग' सेट करने के लिए किया जाता है औचित्य-सामग्री 'की ओर संरेखण' कॉलम ' दिशा:
।खड़ा {ऊंचाई : 150 पीएक्स ;
दिखाना : मोड़ना ;
गद्दी छूट गई : 20 पीएक्स ;
रंग : सफ़ेद ;
पृष्ठभूमि का रंग : डार्कसियान ;
फ्लेक्स-दिशा : कॉलम ;
औचित्य-सामग्री : फ्लेक्स-एंड ;
}
उपरोक्त कोड की व्याख्या नीचे दी गई है:
- ' ऊंचाई ”, “ रंग ' और ' गद्दी छूट गई ” गुण उपरोक्त विधि की तरह ही काम करते हैं।
- उसके बाद, 'सेट करें कॉलम 'के लिए मूल्य' फ्लेक्स-दिशा ” स्तंभों के माध्यम से शैलियों को लागू करने के लिए फ्लेक्सबॉक्स का।
- उसके बाद, ' औचित्य-सामग्री ” संपत्ति पाठ को लंबवत रूप से संरेखित करती है।
- अंत में, ' फ्लेक्स-एंड 'मान तत्व को' पर संरेखित करता है तल ' ओर।
टिप्पणी : उपयोगकर्ता 'भी सेट कर सकते हैं' फ्लेक्स-स्टार्ट ' और ' केंद्र 'के मान' ऊपर ', और ' मध्य ” पक्ष, क्रमशः।
उदाहरण के लिए, उपरोक्त कोड को क्रियान्वित करने के बाद वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट प्रदर्शित करता है कि टेक्स्ट फ्लेक्सबॉक्स के नीचे संरेखित है।
निष्कर्ष
फ्लेक्सबॉक्स के अंदर टेक्स्ट को लंबवत रूप से अलाइन करने के लिए, “ संरेखित-आइटम ' और ' औचित्य-सामग्री 'सीएसएस गुणों का उपयोग किया जा सकता है। इन दोनों संपत्तियों को मिलता है ' फ्लेक्स-स्टार्ट ”, “ केंद्र ' या ' फ्लेक्स-एंड पाठ को संरेखित करने के लिए मान ' ऊपर ”, “ मध्य ' और ' तल ” क्रमशः फ्लेक्सबॉक्स के अंदर निर्देश। इस आलेख ने फ्लेक्सबॉक्स में टेक्स्ट के लंबवत संरेखण का प्रदर्शन किया है।