CSS और HTML का उपयोग करके ब्लॉक या इनलाइन-ब्लॉक बटन एलिमेंट को केंद्र में कैसे लाया जा सकता है?
यह थोड़ा मुश्किल हो सकता है, लेकिन यहां आपके बटन को केंद्र में लाने के कुछ त्वरित सुझाव दिए गए हैं, चाहे वह किसी भी प्रकार का एलिमेंट हो।
इनलाइन-ब्लॉक बटन एलिमेंट
बटन और लिंक एलिमेंट डिफ़ॉल्ट रूप से display: inline-block पर सेट होते हैं। इनलाइन-ब्लॉक सेट वाला एलिमेंट पेज पर दस्तावेज़ के सामान्य प्रवाह में समाहित होगा क्योंकि यह बाएं से दाएं चलता है।
इसका मतलब है कि यदि आपके पास एक के बाद एक दो इनलाइन-ब्लॉक एलिमेंट हैं, तो वे अगल-बगल प्रदर्शित होंगे यदि उनके लिए पर्याप्त क्षैतिज स्थान है।
यह display: inline सेट वाले एलिमेंट्स के समान है, सिवाय इसके कि आप इनलाइन-ब्लॉक एलिमेंट्स की ऊंचाई और चौड़ाई को नियंत्रित कर सकते हैं, न कि इनलाइन एलिमेंट्स की।
text-align: center का उपयोग करके केंद्रित करना
आप पैरेंट एलिमेंट पर text-align: center सेट करके इनलाइन-ब्लॉक (और इनलाइन) एलिमेंट्स को केंद्रित कर सकते हैं।
आइए देखें कि यह कोड में कैसे काम करता है। यहां हमारा HTML मार्कअप है:
<div class="text-center"> <button type="submit">Text-align: center</button> </div>और हमारा CSS:
.text-center { text-align: center; }हमने अपने <button> एलिमेंट को text-align: center सेट वाले <div> में लपेटा है। इसके परिणामस्वरूप बटन इस तरह केंद्रित होगा:
स्थिर चौड़ाई वाला ब्लॉक बटन एलिमेंट
ब्लॉक एलिमेंट्स को text-align: center से केंद्रित नहीं किया जा सकता क्योंकि वे डिफ़ॉल्ट रूप से फुल-विड्थ होंगे जब तक कि उन्हें एक स्थिर चौड़ाई न दी जाए।
कभी-कभी आपको बटन पर एक स्थिर चौड़ाई सेट करने की आवश्यकता हो सकती है, इसलिए यदि आप ऐसा करते हैं, तो आप पेज पर बटन को केंद्रित करने के लिए इस तकनीक का उपयोग कर सकते हैं।
मान लें कि हमारे पास एक बटन है जिसे हमने 200px चौड़ा सेट किया है। भले ही यह केवल 200px का है, यह किसी अन्य एलिमेंट को इसके बगल में नहीं आने देगा।
आप margin-left और margin-right को auto पर सेट करके ब्लॉक लेवल एलिमेंट को केंद्रित कर सकते हैं। हम इसे करने के लिए शॉर्टहैंड margin: 0 auto का उपयोग कर सकते हैं। (यह margin-top और margin-bottom को भी शून्य पर सेट करता है।)
आइए देखें कि यह कोड में कैसा दिखता है:
<button type="submit" class="block magenta margin-auto">Margin: 0 auto</button> .button.block { display: block; width: 200px; } .margin-auto { margin: 0 auto; }और बटन पेज पर इस तरह दिखेगा:
फ्लेक्सबॉक्स का उपयोग करके केंद्रित करना
वैकल्पिक रूप से, आप फ्लेक्सबॉक्स का उपयोग करके इनलाइन-ब्लॉक और ब्लॉक दोनों एलिमेंट्स को केंद्रित कर सकते हैं।
बटन को पैरेंट <div> में लपेटें और पैरेंट को display: flex और justify-content: center पर सेट करें।
उसके लिए कोड यहां है:
<div class="flex-parent jc-center"> <button type="submit">Inline-block button</button> </div> <div class="flex-parent jc-center"> <button type="submit">Block button</button> </div>.flex-parent { display: flex; } .jc-center { justify-content: center; }
दो बटन अगल-बगल
कभी-कभी आप दो बटन को एक-दूसरे के बगल में रखना चाह सकते हैं, लेकिन दोनों को एक साथ पेज पर केंद्रित करना चाहते हैं।
आप इसे दोनों बटन को पैरेंट <div> में लपेटकर और फ्लेक्सबॉक्स का उपयोग करके उन्हें पेज पर केंद्रित करके प्राप्त कर सकते हैं।
उस उदाहरण के लिए कोड यहां है:
<div class="flex-parent jc-center"> <button type="submit" class="green margin-right">Confirm</button> <button type="submit" class="magenta">Cancel</button> </div>.flex-parent { display: flex; } .jc-center { justify-content: center; } button.margin-right { margin-right: 20px; }ध्यान दें कि हमने पहले बटन पर margin-right: 20px भी जोड़ा है, ताकि उनके बीच जगह बनी रहे।
पेज पर बटन इस तरह दिखेंगे!
आप वास्तविक कोड को यहां Codepen पर देख सकते हैं।
