टेक्स्ट-एलाइन, मार्जिन और अधिक का उपयोग करके सीएसएस के साथ केंद्र तत्व

इस CSS ट्यूटोरियल में, हम टेक्स्ट को सेंटर करने और एलिमेंट्स को ब्लॉक करने के बारे में जानेंगे। ऐसी कई तरकीबें हैं जिनका उपयोग आप तत्वों को एक लेआउट में क्षैतिज और लंबवत रूप से केंद्र में करने के लिए कर सकते हैं।

पाठ तत्वों को केंद्र में संरेखित करें

टेक्स्ट को बड़े एलिमेंट के अंदर सेंटर अलाइन करने के लिए, text-align: center; . का इस्तेमाल करें जैसा कि नीचे देखा गया है:

   <शीर्षक>केंद्र <शैली> .div-class { text-align:center; पृष्ठभूमि-रंग:हल्का नीला; } बटन {चौड़ाई:200px; }   
मैं एक पैराग्राफ हूं
 <बटन>मैं सबमिट बटन हूं  मैं एक डिव हूं
 
और सभी टेक्स्ट टेक्स्ट-एलाइन द्वारा केंद्रित किया जा रहा है:केंद्र

केंद्र में ब्लॉक तत्वों को संरेखित करें:

ब्लॉक तत्वों को केंद्रित करना <body> . का उपयोग करके सबसे अच्छा सचित्र है एक HTML दस्तावेज़ का टैग। आपको जो करना है वह समग्र कंटेनर की चौड़ाई को नियंत्रित करना है और फिर मार्जिन को ऑटो पर सेट करना है:

   <शीर्षक>केंद्र <शैली> बॉडी {चौड़ाई:800px; मार्जिन:ऑटो; पृष्ठभूमि:डार्कसियान; रंग सफेद; फ़ॉन्ट-परिवार:'रोबोटो'; पैडिंग:20px; } .div-class { टेक्स्ट-एलाइन:सेंटर; पृष्ठभूमि-रंग:हल्का नीला; रंग काला; } बटन {चौड़ाई:200px; } मैं शरीर का शीर्ष हूं। मैं ऐप कंटेनर की चौड़ाई को नियंत्रित करता हूं (इस मामले में 800px) और मार्जिन:ऑटो का उपयोग करके पूरे ऐप को केंद्र में रख सकता हूं। यदि आप इस टेक्स्ट को केंद्र में रखना चाहते हैं, तो टेक्स्ट-एलाइन का उपयोग करें:केंद्र  
मैं एक पैराग्राफ हूं
  मैं एक div हूं
 
और सभी पाठ पाठ-संरेखण:केंद्र
 द्वारा केंद्रित किए जा रहे हैं

सेंटर अलाइन इमेज:

एक छवि को केंद्र में रखने के लिए, CSS चयनकर्ता में, अपने प्रदर्शन को ब्लॉक करने के लिए बदलें और फिर % का उपयोग करके छवि तत्व की चौड़ाई को नियंत्रित करें। या px . margin सेट करें करने के लिए auto :

<शीर्षक>केंद्र <शैली> बॉडी {चौड़ाई:800px; मार्जिन:ऑटो; पृष्ठभूमि:डार्कसियान; रंग सफेद; फ़ॉन्ट-परिवार:'रोबोटो'; पैडिंग:20px; } .div-class { टेक्स्ट-एलाइन:सेंटर; पृष्ठभूमि-रंग:हल्का नीला; रंग काला; } बटन {चौड़ाई:200px; } आईएमजी {प्रदर्शन:ब्लॉक; मार्जिन:20px ऑटो; चौड़ाई:50%; } मैं शरीर का शीर्ष हूं। मैं ऐप कंटेनर की चौड़ाई को नियंत्रित करता हूं (इस मामले में 800px) और मार्जिन:ऑटो का उपयोग करके पूरे ऐप को केंद्र में रख सकता हूं। यदि आप इस टेक्स्ट को केंद्र में रखना चाहते हैं, तो टेक्स्ट-एलाइन का उपयोग करें:केंद्र

मैं एक पैराग्राफ हूं

मैं एक div हूं

और सभी पाठ पाठ-संरेखण:केंद्र

द्वारा केंद्रित किए जा रहे हैं

नीचे इमेज को सेंटर करने के लिए, डिस्प्ले को ब्लॉक में बदलें और फिर मार्जिन को ऑटो पर सेट करें, px या % का उपयोग करके चौड़ाई को नियंत्रित करें

टेक्स्ट-एलाइन, मार्जिन और अधिक का उपयोग करके सीएसएस के साथ केंद्र तत्व

एक डिव में लंबवत और क्षैतिज रूप से केंद्र:

पैडिंग:

एक <div> . में लंबवत रूप से केन्द्रित करने के लिए , इसे करने के कई तरीके हैं। सबसे पहले, और शायद सबसे आसान, अपने <div> . में पैडिंग को एडजस्ट करना है - फिर आप text-align: center . का उपयोग कर सकते हैं अनुच्छेद को क्षैतिज रूप से केन्द्रित करने के लिए:

मैं एक पैराग्राफ हूं

मैं एक div हूं

और सभी पाठ पाठ-संरेखण:केंद्र

द्वारा केंद्रित किए जा रहे हैं

लाइन-ऊंचाई:

आप उस ब्लॉक तत्व की ऊंचाई पर लाइन-ऊंचाई भी सेट कर सकते हैं जिसे आप टेक्स्ट-एलाइन के संयोजन के साथ केंद्रित कर रहे हैं:केंद्र में तत्व को संरेखित करने के लिए केंद्र। यदि आपके पास एक से अधिक पंक्तियाँ हैं, तो माता-पिता और बच्चे दोनों पर पंक्ति-ऊँचाई का उपयोग करें और vertical-align: middle जोड़ें और display: inline-block बच्चे को:

   <शीर्षक>केंद्र <शैली> बॉडी {चौड़ाई:800px; मार्जिन:ऑटो; पृष्ठभूमि:डार्कसियान; रंग सफेद; फ़ॉन्ट-परिवार:'रोबोटो'; पैडिंग:20px; } #ऊर्ध्वाधर-केंद्र-रेखाऊंचाई { रेखा-ऊंचाई:200px; सीमा:5px डबल आइवरी; पाठ-संरेखण:केंद्र; मार्जिन-बॉटम:20px; }   
मैं लाइनहाइट और टेक्स्ट-एलाइन:सेंटर का उपयोग करके एक div में लंबवत केंद्रित और क्षैतिज रूप से केंद्रित हूं।
 
  
मैं लाइनहाइट, डिस्प्ले:इनलाइन-ब्लॉक और वर्टिकल-एलाइन:मिडिल का उपयोग करके एक डिव में लंबवत केंद्रित और क्षैतिज रूप से केंद्रित हूं। जब आपके पास क्षैतिज और लंबवत अक्षों पर केंद्र में टेक्स्ट की एकाधिक पंक्तियां हों तो मेरा उपयोग करें।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

रूपांतरित करें:

एक और तरीका है कि आप तत्वों को केंद्र में रख सकते हैं स्थिति और परिवर्तन का उपयोग करके। मूल तत्व को स्थिति पर सेट करें:सापेक्ष, बाल तत्व को पूर्ण स्थिति पर सेट करें। चाइल्ड एलिमेंट को शीर्ष पर और 50% पर छोड़ दिया जाना चाहिए और फिर हम div में टेक्स्ट को एडजस्ट करने के लिए ट्रांसफॉर्म प्रॉपर्टी का उपयोग करते हैं। हम इस संपत्ति के बारे में एक और पोस्ट में बात करेंगे, इसलिए यह ठीक है अगर यह इस समय 100 प्रतिशत स्पष्ट नहीं है:

   <शीर्षक>केंद्र <शैली> बॉडी {चौड़ाई:800px; मार्जिन:ऑटो; पृष्ठभूमि:डार्कसियान; रंग सफेद; फ़ॉन्ट-परिवार:'रोबोटो'; पैडिंग:20px; } #वर्टिकल-सेंटर-ट्रांसफॉर्म {ऊंचाई:200px; स्थिति:रिश्तेदार; सीमा:5px डबल आइवरी; मार्जिन-बॉटम:20px; } #वर्टिकल-सेंटर-ट्रांसफॉर्म पी { मार्जिन:0; स्थिति:निरपेक्ष; शीर्ष:50%; बाएं:50%; परिवर्तन:अनुवाद (-50%, -50%); }   
मैं ट्रांसफॉर्म का उपयोग करके एक div में लंबवत केंद्रित और क्षैतिज रूप से केंद्रित हूं। टेक्स्ट नहीं मध्य संरेखित है।

फ्लेक्सबॉक्स:

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

<शीर्षक>केंद्र <शैली> बॉडी {चौड़ाई:800px; मार्जिन:ऑटो; पृष्ठभूमि:डार्कसियान; रंग सफेद; फ़ॉन्ट-परिवार:'रोबोटो'; पैडिंग:20px; } #वर्टिकल-सेंटर-फ्लेक्सबॉक्स {ऊंचाई:200px; प्रदर्शन:फ्लेक्स; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; सीमा:5px डबल आइवरी; }

मैं flexbox का उपयोग करके एक div में लंबवत और क्षैतिज रूप से केंद्रित हूं।

ये सबसे सामान्य तरीके हैं जिनसे आप अपने तत्वों को अपने लेआउट में केंद्रित करने की समस्या को हल कर सकते हैं।