एक पाठ को कहीं भी आसानी से जोड़ा जा सकता है, लेकिन संरेखण के बिना, यह प्रस्तुत करने योग्य और कम आकर्षक लग सकता है। असंरेखित पाठ एक वेब पृष्ठ के संपूर्ण स्वरूप को भी अस्त-व्यस्त कर सकता है। वेब एप्लिकेशन में ऐसी चीजों से निपटने के लिए, हम CSS के कुछ उपयोगी गुणों का उपयोग कर सकते हैं जो आपको कुछ ही समय में टेक्स्ट को संरेखित करने में मदद करेंगे।
यह आलेख प्रदर्शित करेगा कि सीएसएस में टेक्स्ट को लंबवत रूप से कैसे संरेखित किया जाए।
CSS में टेक्स्ट को वर्टिकली अलाइन कैसे करें?
CSS में, आप टेक्स्ट को लंबवत रूप से संरेखित करने के लिए नीचे दिए गए गुणों का उपयोग कर सकते हैं:
-
- लाइन-ऊंचाई संपत्ति
- प्रदर्शन और संरेखित-आइटम गुण
अब, प्रत्येक विधि को एक-एक करके देखते हैं!
विधि 1: सीएसएस में टेक्स्ट को लंबवत रूप से संरेखित करने के लिए लाइन-ऊंचाई संपत्ति का उपयोग करना
' ऊंची लाईन संपत्ति नीचे और ऊपर की ओर इनलाइन तत्वों के क्षेत्र को निर्दिष्ट करती है। यह अन्य मदों से पाठ की दूरी निर्धारित करता है। लाइन-ऊंचाई संपत्ति का उपयोग करके, टेक्स्ट को आसानी से बीच में लंबवत रूप से गठबंधन किया जा सकता है।
उदाहरण
यहाँ एक बॉक्स (बॉर्डर) के अंदर एक टेक्स्ट है जो वर्तमान में ऊपर बाईं ओर स्थित है। आइए इस पाठ को लंबवत और क्षैतिज रूप से केंद्र में संरेखित करें:
अब अगली विधि की ओर बढ़ते हैं। ' फ्लेक्सबॉक्स 'एक आयामी लेआउट है जो आपको HTML को प्रारूपित करने की अनुमति देता है। आप इसका उपयोग वस्तुओं को लंबवत या क्षैतिज रूप से संरेखित करने के लिए भी कर सकते हैं। तो, चलिए एक उदाहरण लेते हैं और फ्लेक्सबॉक्स की मदद से टेक्स्ट को लंबवत रूप से संरेखित करते हैं। उदाहरण सबसे पहले, हम 'का मान सेट करके अपने कंटेनर को लचीला बना देंगे' दिखाना 'संपत्ति के रूप में' मोड़ना ' अगला, 'का उपयोग करें' संरेखित-आइटम केंद्र में सामग्री को लंबवत रूप से सेट करने के लिए संपत्ति। इसके अलावा, सामग्री को केंद्र में क्षैतिज रूप से संरेखित करने के लिए, ' औचित्य-सामग्री 'संपत्ति का उपयोग किया जाएगा: CSS में, टेक्स्ट को 'की मदद से आसानी से लंबवत रूप से संरेखित किया जा सकता है' ऊंची लाईन ' संपत्ति। आप 'का उपयोग भी कर सकते हैं' फ्लेक्सबॉक्स 'के साथ पाठ के लंबवत संरेखण के लिए' दिखाना ' तथा ' संरेखित-आइटम ' गुण। फ्लेक्सबॉक्स एक आयामी लेआउट है और इसका उपयोग केवल वस्तुओं के लंबवत या क्षैतिज संरेखण के लिए किया जाता है। इस पोस्ट ने दो सबसे आसान तरीकों की पेशकश की जो आपको सीएसएस में टेक्स्ट को लंबवत रूप से संरेखित करने में मदद कर सकते हैं।
ऐसा करने के लिए, एक कंटेनर जोड़ें '
सर्वश्रेष्ठ शैक्षिक वेबसाइट !
डिव >
बॉक्स एक 'का उपयोग करके बनाया गया है 3पीएक्स 'सीमा और' 250px ' कद। ' फ़ॉन्ट आकार 'संपत्ति का उपयोग मूल्य के साथ किया जाता है' 24पीएक्स 'फ़ॉन्ट को दृश्यमान बनाने के लिए। हम div को असाइन करेंगे ' ऊंची लाईन ' का ' 250px “इसके पाठ को बीच में लंबवत रूप से संरेखित करने के लिए। अगला, हम 'का उपयोग करेंगे' पाठ संरेखित “केंद्र में टेक्स्ट को संरेखित करने के लिए गुण:
लाइन-ऊंचाई: 250px;
पाठ-संरेखण: केंद्र;
फ़ॉन्ट-आकार: 24px;
ऊंचाई: 250 पीएक्स;
सीमा: 3px ठोस;
}
जैसा कि आप देख सकते हैं, टेक्स्ट को लाइन-ऊंचाई का उपयोग करके केंद्र में लंबवत रूप से गठबंधन किया गया है और क्षैतिज रूप से टेक्स्ट-संरेखण संपत्ति के साथ केंद्र में गठबंधन किया गया है। विधि 2: सीएसएस में टेक्स्ट को लंबवत रूप से संरेखित करने के लिए डिस्प्ले और एलाइन-आइटम प्रॉपर्टी का उपयोग करना
दिखाना: मोड़ना ;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
फ़ॉन्ट-आकार: 24px;
ऊंचाई: 200px;
सीमा: 3px ठोस;
}
निर्दिष्ट पाठ को सफलतापूर्वक केंद्र में संरेखित किया गया है:
हमने CSS में टेक्स्ट को लंबवत रूप से संरेखित करने से संबंधित तरीके प्रदान किए हैं। निष्कर्ष