ट्विटर बूटस्ट्रैप 3 में बटन कैसे केंद्रित करें?

Question

मैं ट्विटर बूटस्ट्रैप में एक फॉर्म का निर्माण कर रहा हूं, लेकिन फॉर्म में इनपुट के नीचे बटन को केंद्रित करने के साथ मुझे समस्या हो रही है। मैंने पहले ही center-blockकक्षा को बटन पर लागू करने की कोशिश की है लेकिन यह काम नहीं किया। मुझे इसे कैसे ठीक करना चाहिए?

यहाँ मेरा कोड है।

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Answer 1

"टेक्स्ट-सेंटर" क्लास के साथ बटन को लपेटें।

बस इसे बदलें:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

इसके लिए:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

संपादित करें

के रूप में BootstrapV4 , center-blockगिरा दिया गया था # 19102 के पक्ष मेंm-*-auto

Comments

फाउंडेशन के साथ भी काम करता है)

— divideByZero

Answer 2

ट्विटर बूटस्ट्रैप प्रलेखन के अनुसार: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

सभी वर्ग center-blockको 0 ऑटो के मार्जिन के तत्व को बताने के लिए है, ऑटो को बाएं / दाएं हाशिये पर है। हालाँकि, जब तक कि क्लास टेक्स्ट-सेंटर या css टेक्स्ट-एलाइन: सेंटर; माता-पिता पर सेट किया गया है, तत्व को इस ऑटो गणना से बाहर काम करने के लिए बिंदु नहीं पता है, जिससे यह खुद को प्रत्याशित नहीं होगा।

ऊपर दिए गए कोड का एक उदाहरण देखें: https://jsfiddle.net/Seany84/2j9pxt1z/

Answer 3

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Comments

यह वही है जिसने मेरे लिए काम किया है। मैंने ऊपर दूसरों की कोशिश की और यह केंद्र नहीं होगा।

— mwwrazor

कैसे एक inputतत्व के साथ एक ही करने के लिए ?

— इंफेरो

Answer 4

अपनी शैली में जोड़ें:

प्रदर्शन: टेबल; मार्जिन: 0 ऑटो;

Comments

निश्चित नहीं है कि आप इस निष्कर्ष पर कैसे आए।

— फर्गुस

Answer 5

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह कोड क्यों और / या इस प्रश्न के उत्तर के बारे में अतिरिक्त संदर्भ प्रदान करता है, इसके दीर्घकालिक मूल्य में सुधार करता है।

— Ajean

Answer 6

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

उदाहरण के लिए

.button{
  margin:0px auto; //it will center them 
}

0px ऊपर और नीचे से होगा और ऑटो बाएँ और दाएँ से होगा।

Answer 7

मैंने निम्नलिखित कोड की कोशिश की और यह मेरे लिए काम किया।

<button class="btn btn-default center-block" type="submit">Button</button>

बटन नियंत्रण एक div में है और बूटस्ट्रैप के केंद्र-ब्लॉक वर्ग का उपयोग करने से मुझे बटन को div के केंद्र में संरेखित करने में मदद मिली

उस लिंक को जांचें जहां आपको केंद्र-ब्लॉक वर्ग मिलेगा

http://getbootstrap.com/css/#helper-classes-center

Answer 8

text-align: centerसीएसएस संपत्ति का उपयोग करें

Answer 9

बूटस्ट्रैप 4 के लिए अपडेट:

फ्लेक्सबॉक्स का लाभ उठाने के लिए 'डी-फ्लेक्स' और 'जस्टिफाई-कंटेंट-सेंटर' यूटिलिटी क्लासेस के साथ एक डिव सेट के साथ बटन को लपेटें।

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

फ्लेक्सबॉक्स का उपयोग करने का लाभ एक ही धुरी पर अतिरिक्त तत्व / बटन जोड़ने में सक्षम है, लेकिन अपने स्वयं के अलग संरेखण के साथ। यह 'संरेखित-आइटम-प्रारंभ / केंद्र / अंत' कक्षाओं के साथ ऊर्ध्वाधर संरेखण की संभावना को भी खोलता है।

आप उन्हें एक दूसरे के साथ संरेखित रखने के लिए लेबल और बटन को एक और div के साथ लपेट सकते हैं।

उदा। https://codepen.io/anon/pen/BJoeRY?editors=1000

Answer 10

आप निम्नलिखित कर सकते हैं। यह ओवरलैपिंग बटन से भी बचता है।

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Answer 11

यह मेरे लिए काम करता है एक स्वतंत्र बनाने की कोशिश <div>तो उस buttonमें डाल दिया । सिर्फ इस तरह :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

फिर अपने CSSस्टाइल पेज पर जाएं और Text-align:centerइस तरह करें:

#contactBtn{text-align: center;}

Answer 12

बूटस्ट्रैप 3 के लिए

हम कॉलम के साथ अंतरिक्ष को विभाजित करते हैं, हम 8 छोटे कॉलम (कॉल-एक्स -8) का उपयोग करते हैं, हम 4 खाली कॉलम (कॉल-एक्स-ऑफसेट-4) छोड़ते हैं और हम संपत्ति (केंद्र-ब्लॉक) लागू करते हैं

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

बूटस्ट्रैप 4 के लिए

हम रिक्ति का उपयोग करते हैं, बूटस्ट्रैप में तत्व की उपस्थिति को संशोधित करने के लिए संक्षिप्त और गद्देदार प्रतिक्रिया मार्जिन उपयोगिता वर्गों की एक विस्तृत श्रृंखला शामिल है। वर्गों को xs और {संपत्ति} {पक्षों} के लिए प्रारूप {संपत्ति} {पक्षों} - {आकार} - का उपयोग करके नाम दिया जाता है, sm, md, lg, और xl के लिए {आकार}।

यहाँ अधिक जानकारी: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Comments

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित आपकी प्रतिक्रिया की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— स्टीफन क्रैन

Answer 13

मुझे यह समस्या थी। मैंनें इस्तेमाल किया

<div class = "col-xs-8 text-center">

मेरी div पर कुछ h3 लाइनें, एक जोड़ी h4 लाइनें और एक बूटस्ट्रैप बटन है। बटन के अलावा सब कुछ केंद्र में कूद गया जब मैंने पाठ-केंद्र का उपयोग किया, तो मैं बूटस्ट्रैप से आगे निकलकर अपनी सीएसएस शीट में चला गया और बटन को एक बटन दिया

margin: auto;

जो समस्या को हल करने के लिए लगता है।

Answer 14

या आप बटन स्थिति बनाने के लिए विशिष्ट ऑफ़सेट दे सकते हैं जहाँ आप बस बूटस्ट्रैप ग्रिड सिस्टम के साथ चाहते हैं,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

इस तरह, यदि आप btn-block सेट करते हैं, तो आपको बटन का आकार भी बताने देता है। यकीन है, यह केवल md आकार की श्रेणी में काम करेगा, यदि आप अन्य आकार भी सेट करना चाहते हैं, तो xs, sm, lg का उपयोग करें।