6 सीएसएस ट्रिक्स सामग्री को संरेखित करने के लिए

, एक कंटेनर है, दूसरा, बाल तत्व जिसमें सामग्री है.

हम पहले कंटेनर तत्व की स्थिति को सापेक्ष में सेट करेंगे, फिर हम बच्चे के तत्व की स्थिति को निर्धारित करेंगे पूर्ण. यह हमें कंटेनर में स्वतंत्र रूप से रखने की अनुमति देता है.

इसे लंबवत रूप से संरेखित करने के लिए, ऊपर की ओर से बाल तत्व की स्थिति को कंटेनर की ऊँचाई के आधे भाग तक ले जाएँ, और इसे बाल तत्व की चौड़ाई के आधे भाग तक खींच लें। यहाँ उत्पादन है:

यह चाल सही है जब केवल एक ही बाल तत्व है, अन्यथा पूर्ण स्थिति उसी कंटेनर के भीतर अन्य तत्व को प्रभावित करेगी.

2. CSS3 के ट्रांसफ़ॉर्म का उपयोग करें

CSS3 के रूपांतरण इससे सामग्री को केंद्र में रखना आसान हो गया है। CSS3 रूपांतरण, के विपरीत पद संपत्ति, एक ही कंटेनर के भीतर अन्य तत्वों की स्थिति को प्रभावित नहीं करेगा.

मान लें कि हमारे पास पूर्ववर्ती विधि के समान HTML संरचना है - एक माता-पिता, एक बच्चा तत्व - 50% ऊपर से और CSS ट्रांसफ़ॉर्म का उपयोग करने से अनुवाद होता है -50%. आखिर तुमने इसे हासिल कर ही लिया है.

हालांकि ध्यान रखें कि CSS3 ट्रांसफ़ॉर्म इंटरनेट एक्सप्लोरर 8 और उससे नीचे के काम नहीं करेगा। आप यहां अन्य किसी भी तरीके का उपयोग कमबैक के रूप में करना चाह सकते हैं.

3. पैडिंग का उपयोग करें

हम भी उपयोग कर सकते हैं गद्दी ऊर्ध्वाधर संरेखण का भ्रम पैदा करना। ऐसा करने के लिए, बस ऊपर और नीचे पैडिंग को समान रूप से सेट करें, इस प्रकार है:

यह चाल तब उपयुक्त होती है जब आप कंटेनर को एक निश्चित चौड़ाई में सेट नहीं करते हैं, बस चौड़ाई निर्धारित करते हैं ऑटो.

4. लाइन ऊंचाई का उपयोग करें

यदि आपके पास कंटेनर में केवल पाठ्य सामग्री की एक ही पंक्ति है, तो आप पाठ का उपयोग करके लंबवत संरेखित कर सकते हैं ऊंची लाईन संपत्ति। ठीक ऊंची लाईन कंटेनर की ऊँचाई के समान मूल्य, और आपको निम्न आउटपुट दिखाई देगा.

याद रखें कि यह ट्रिक केवल टेक्स्ट की एक लाइन के साथ काम करती है। यदि सामग्री दो या दो से अधिक लाइनों में टूटती है, तो प्रत्येक पंक्ति के बीच का स्थान वैसा ही होगा जैसा हम में निर्दिष्ट है ऊंची लाईन, हमें बहुत अधिक व्हाट्सएप देना.

5. सीएसएस टेबल का प्रयोग करें

व्यक्तिगत रूप से, सीएसएस टेबल का उपयोग ऊर्ध्वाधर संरेखण लागू करने के लिए मेरी पसंदीदा चाल है। यह इंटरनेट एक्सप्लोरर 8 जैसे पुराने ब्राउज़रों में काम करता है। इस विधि को कंटेनर एलिमेंट डिस्प्ले को सेट करके किया जाता है तालिका, जबकि बाल तत्व को प्रदर्शित किया जाना है तालिका सेल तो का उपयोग करें ऊर्ध्वाधर- align टेक्स्ट को लंबवत रूप से रखने के लिए गुण.

6. फ्लेक्सबॉक्स का उपयोग करें

वर्टिकल सेंटरिंग की आखिरी विधि फ्लेक्सबॉक्स का उपयोग करके है। फ्लेक्सबॉक्स CSS3 में एक नया मॉड्यूल है। यह सामग्री को संरेखित करने के लिए अधिक सरल विधि प्रदान करता है। फ्लेक्स बॉक्स में सामग्री को लंबवत रूप से केन्द्रित करने के लिए, बस जोड़ें संरेखित-आइटम: केंद्र; निम्नानुसार है, और यह बात है.

ध्यान रखें कि Flexbox कुछ ब्राउज़र केवल Flexbox मॉड्यूल जैसे इंटरनेट एक्सप्लोरर 10, सफारी, 6 और क्रोम 27 और उससे नीचे के हिस्से की सुविधा का समर्थन करते हैं। इसलिए, CSS3 ट्रांसफ़ॉर्म के साथ चाल के समान, सुनिश्चित करें कि इन ब्राउज़र में प्रभाव अच्छी तरह से पड़ता है.