आप CSS और HTML का उपयोग करके किसी ब्लॉक या इनलाइन-ब्लॉक बटन तत्व को कैसे केन्द्रित कर सकते हैं?
यह थोड़ा मुश्किल हो सकता है, लेकिन यहां कुछ त्वरित सुझाव दिए गए हैं कि कैसे अपने बटन को केंद्र में रखा जाए, चाहे वह किसी भी प्रकार का तत्व क्यों न हो।
इनलाइन-ब्लॉक बटन तत्व
बटन और लिंक तत्व, डिफ़ॉल्ट रूप से, display: inline-block . पर सेट होते हैं . इनलाइन-ब्लॉक सेट वाला तत्व पृष्ठ पर दस्तावेज़ के सामान्य प्रवाह के भीतर समाहित हो जाएगा क्योंकि यह बाएं से दाएं चलता है।
इसका अर्थ यह है कि यदि आपके पास एक के बाद एक दो इनलाइन-ब्लॉक तत्व हैं, तो पर्याप्त क्षैतिज स्थान होने पर वे साथ-साथ प्रदर्शित होंगे।
यह display: inline वाले तत्वों के समान है सेट करें, सिवाय इसके कि आप इनलाइन-ब्लॉक तत्वों की ऊंचाई और चौड़ाई को नियंत्रित कर सकते हैं, न कि इनलाइन तत्वों को।
पाठ्य-संरेखण का उपयोग कर केंद्रित करना:केंद्र
आप text-align: center . सेट करके इनलाइन-ब्लॉक (और इनलाइन) तत्वों को केंद्र में रख सकते हैं मूल तत्व पर।
आइए देखें कि यह कोड में कैसे काम करता है। ये रहा हमारा HTML मार्कअप:
<div class="text-center">
<button type="submit">Text-align: center</button>
</div>और हमारा सीएसएस:
.text-center {
text-align: center;
}
हमने अपना <button> . लपेट लिया है <div> . में तत्व text-align: center . के साथ समूह। इसके परिणामस्वरूप बटन इस तरह केंद्रित होगा:
ब्लॉक बटन तत्व w/ स्थिर चौड़ाई
ब्लॉक तत्वों को 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;
}और पेज पर बटन इस तरह दिखेगा:
फ्लेक्सबॉक्स का उपयोग करके केंद्रित करना
वैकल्पिक रूप से, आप flexbox का उपयोग करके इनलाइन-ब्लॉक और ब्लॉक दोनों तत्वों को केंद्र में रख सकते हैं।
बटन को पैरेंट में लपेटें <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 . भी जोड़ा है उनके बीच जगह जोड़ने के लिए पहले बटन पर।
यहां बताया गया है कि पेज पर बटन कैसे दिखाई देंगे!
आप यहां एक कोडपेन में सभी वास्तविक कोड देख सकते हैं।