लिंक को केंद्र में रखने के दो तरीके हैं:
- CSS में केंद्र लिंक का उपयोग करके ' पाठ संरेखित ' संपत्ति
- CSS में केंद्र लिंक का उपयोग करके ' अंतर ' संपत्ति
इस लेख में, हम लिंक को केंद्र में रखने के लिए दोनों विधियों की व्याख्या करेंगे। चलिए, शुरू करते हैं!
विधि 1: पाठ-संरेखित संपत्ति का उपयोग करके सीएसएस में केंद्र लिंक
HTML में लिंक्स को केन्द्रित करने के लिए, हम “का उपयोग करेंगे” पाठ संरेखित 'सीएसएस की संपत्ति। ' पाठ संरेखित CSS में संपत्ति का उपयोग पाठ के संरेखण को समायोजित करने के लिए किया जाता है जैसे कि बाएँ, दाएँ, केंद्र, और संरेखण को सही ठहराना।
वाक्य - विन्यास
टेक्स्ट-एलाइन प्रॉपर्टी का सिंटैक्स है:
पाठ संरेखित : मूल्य
की जगह ' मूल्य ”, आप पाठ के संरेखण को बाएँ, दाएँ, केंद्र और औचित्य के रूप में सेट कर सकते हैं।
अब, हम 'का उपयोग करेंगे' पाठ संरेखित 'दिए गए लिंक को केंद्र में संरेखित करने के लिए।
उदाहरण
किसी वेब पेज पर एक लिंक को केन्द्रित करने के लिए, हम
टैग के अंदर HTML में एक लिंक जोड़ेंगे। ऐसा करने के लिए, हाइपरलिंक को परिभाषित करने के लिए टैग का उपयोग करें और आवश्यक साइट का पता दें। उसके बाद, लिंक का नाम निर्दिष्ट करें। हमारे मामले में, हमने अपनी Linuxhint वेबसाइट का लिंक जोड़ा है।एचटीएमएल
< तन >< एक href = 'https://linuxhint.com/' > लिनक्स < / एक >
< / तन >
नीचे दी गई छवि इंगित करती है कि लिंक जोड़ा गया है जो डिफ़ॉल्ट रूप से बाईं ओर स्थित है:
अब लिंक को सेंटर करने के लिए CSS पर जाएँ।
यहाँ, हम उपयोग करेंगे ' एक 'जोड़े गए लिंक तक पहुंचने के लिए। उसके बाद, टेक्स्ट-एलाइन का मान 'के रूप में सेट करें' केंद्र 'और' के रूप में प्रदर्शित करें खंड मैथा ' नतीजतन, तत्व को एक ब्लॉक तत्व के रूप में जोड़ा जाएगा, एक नई लाइन से शुरू होकर पूरी चौड़ाई तक।
सीएसएस
एक {पाठ संरेखित : केंद्र ;
दिखाना : खंड मैथा ;
}
टिप्पणी: CSS टेक्स्ट-एलाइन प्रॉपर्टी टैग को केंद्र में रखने के लिए अकेले काम नहीं करती है। इसलिए, आपको 'का उपयोग करना चाहिए' दिखाना 'संपत्ति और उसका मूल्य निर्धारित करें' खंड मैथा 'लिंक को केन्द्रित करने के लिए।
अब, HTML पर जाएँ और निम्नलिखित परिणाम देखने के लिए इसे निष्पादित करें। यहां, आप देख सकते हैं कि लिंक वेबपेज के केंद्र में संरेखित है:
केंद्र में लिंक को संरेखित करने के लिए दूसरी विधि पर चलते हैं।
विधि 2: 'मार्जिन' संपत्ति का उपयोग करके सीएसएस में केंद्र लिंक
सीएसएस में, ' अंतर ' संपत्ति का उपयोग लिंक को केंद्र में रखने के लिए किया जाता है। यह 'की आशुलिपि संपत्ति है मार्जिन छोड़ दिया ',' ' मार्जिन-सही ',' ' मार्जिन टॉप ', तथा ' मार्जिन-बॉटम ' गुण। आप सभी दिए गए गुणों के मान एक ही पंक्ति में सेट कर सकते हैं।
वाक्य - विन्यास
मार्जिन संपत्ति का सिंटैक्स है:
अंतर : ऑटो | ऊपर सही नीचे बाएंऊपर दिए गए सिंटैक्स का विवरण नीचे दिया गया है:
- ऑटो: इसका उपयोग ब्राउज़र के अनुसार तत्वों को सेट करने के लिए किया जाता है।
- ऊपर: इसका उपयोग ऊपर से मार्जिन सेट करने के लिए किया जाता है।
- सही: इसका उपयोग मार्जिन को दाईं ओर से सेट करने के लिए किया जाता है।
- बटन: इसका उपयोग नीचे से मार्जिन सेट करने के लिए किया जाता है।
- बाएं: इसका उपयोग बाईं ओर से मार्जिन सेट करने के लिए किया जाता है।
टिप्पणी: दो मान निर्दिष्ट करना ऊपर और नीचे से मार्जिन और बाएँ और दाएँ से हाशिया को दर्शाता है; हालांकि, यदि एक मान जोड़ा जाता है, तो मार्जिन सभी चार पक्षों पर लागू होगा।
आइए उदाहरण पर चलते हैं, जहां हम 'का उपयोग करके एक लिंक को केन्द्रित करेंगे' अंतर ' संपत्ति।
उदाहरण
सबसे पहले डिस्प्ले प्रॉपर्टी का मान 'के रूप में सेट करें' खंड मैथा 'और चौड़ाई' के रूप में 70px ' उसके बाद, मार्जिन प्रॉपर्टी लागू करें और उसका मान “पर सेट करें” ऑटो ':
एक {दिखाना : खंड मैथा ;
चौड़ाई : 70px ;
अंतर : ऑटो ;
}
टिप्पणी: ' दिखाना ' तथा ' चौड़ाई ' संपत्ति सेट करने के लिए आवश्यक है; अन्यथा ' अंतर 'संपत्ति काम नहीं करेगी। चौड़ाई गुण का मान डिस्प्ले स्क्रीन के रिज़ॉल्यूशन और टेक्स्ट की लंबाई के अनुसार सेट किया जा सकता है।
आप दी गई छवि से देख सकते हैं कि लिंक सफलतापूर्वक केंद्रित है:
इतना ही! हमने लिंक को केन्द्रित करने के तरीकों के बारे में बताया।
निष्कर्ष
' पाठ संरेखित ' तथा ' अंतर 'संपत्ति का उपयोग' के योगदान के साथ लिंक को केन्द्रित करने के लिए किया जाता है दिखाना ' तथा ' चौड़ाई ' संपत्ति। टेक्स्ट-एलाइन प्रॉपर्टी के साथ डिस्प्ले प्रॉपर्टी जरूरी है, मार्जिन प्रॉपर्टी का इस्तेमाल करते समय, लिंक को सेंटर करने के लिए डिस्प्ले और चौड़ाई दोनों प्रॉपर्टीज अनिवार्य हैं। इस गाइड ने सीएसएस में एक लिंक को केन्द्रित करने के लिए विभिन्न तरीकों पर चर्चा की है।