बूटस्ट्रैप 4, मैं एक बटन को केंद्र-संरेखित कैसे करूं?

Question

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div v-for="job in job">
        <div class="text-center">
          <h1>{{ job.job_title }}</h1>
          <p><strong>Google Inc. </strong> - {{ job.location }}</p>
          <h2><u>Job Description</u></h2>
        </div>
        <p v-html="desc"></p>
        <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
        <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
      </div>
    </div>
    <div class="hidden-sm-down col-md-4"></div>
  </div>
</div>

यह पता नहीं लगा सकते कि इस बटन को कैसे केन्द्रित किया जाए। बीएस 3 में मैं सिर्फ सेंटर-ब्लॉक का उपयोग करूंगा लेकिन यह बीएस 4 में विकल्प नहीं है। कोई सुझाव?

Answer 1

बूटस्ट्रैप 4 में इनलाइन-ब्लॉकtext-center को संरेखित करने के लिए कक्षा का उपयोग करना चाहिए ।

नोट: text-align:center;आपके द्वारा अपने मूल तत्व पर लागू होने वाले कस्टम वर्ग में परिभाषित किया गया है जो आपके द्वारा उपयोग किए जा रहे बूटस्ट्रैप संस्करण की परवाह किए बिना काम करेगा। और ठीक यही बात .text-centerलागू होती है।

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

---

यदि केंद्रित की जाने वाली सामग्री ब्लॉक या फ्लेक्स (नहीं inline-) है, तो कोई इसे केंद्र में लाने के लिए फ्लेक्सबॉक्स का उपयोग कर सकता है:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

... जो display: flex; justify-content: centerमाता-पिता पर लागू होता है।

नोट: के.row.justify-content-center बजाय का उपयोग नहीं करते .d-flex.justify-content-center, के रूप में .rowकुछ जवाबदेही अंतराल पर नकारात्मक हाशिये लागू होता है, जो अप्रत्याशित क्षैतिज स्क्रॉलबार (जब तक .rowकि एक सीधा बच्चा है .container, जो नकारात्मक जवाबदेही को सही जवाबदेही अंतराल पर लागू करने के लिए पार्श्व पैडिंग लागू होता है) के परिणामस्वरूप होता है। यदि आपको .rowकिसी भी कारण से उपयोग करना है , तो इसके मार्जिन और पैडिंग को ओवरराइड करें .m-0.p-0, जिस स्थिति में आप बहुत अधिक शैलियों के साथ समाप्त होते हैं .d-flex।

महत्वपूर्ण नोट: दूसरा समाधान तब समस्याग्रस्त होता है जब केंद्रित सामग्री (बटन) माता-पिता की चौड़ाई से अधिक हो जाती है ( .d-flex) खासकर जब माता-पिता के पास व्यूपोर्ट की चौड़ाई होती है, विशेष रूप से क्योंकि इससे सामग्री की शुरुआत में क्षैतिज रूप से स्क्रॉल करना असंभव हो जाता है (बाएं-) अधिकांश)।
इसलिए इसका उपयोग तब न करें जब केन्द्रित होने वाली सामग्री उपलब्ध मूल चौड़ाई की तुलना में व्यापक हो सकती है और सभी सामग्री सुलभ होनी चाहिए।

Comments

कोई बात नहीं, मैं केवल गूंगा था और पंक्ति के अंदर कॉल के बजाय कॉल के अंदर पंक्ति डाल रहा था।

— प्रोग्राममुड

Answer 2

इसे बूटस्ट्रैप के साथ आज़माएँ

कोड:

<div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

संपर्क:

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

Comments

कुछ और काम नहीं किया, यहां तक ​​कि मैन्युअल रूप से ऑब्जेक्ट को शैलियों को दे रहा है। लेकिन यह काम करता है। इस उत्तर को स्वीकार करें।

— तारकिन

केवल यह समाधान काम करता है, पता नहीं क्यों, लेकिन यह सच है

— अरशद अली

Answer 3

यहाँ पूर्ण HTML है जिसे मैं फ़ॉर्म-समूह को बंद करने के बाद बूटस्ट्रैप फॉर्म में बटन द्वारा केंद्र में उपयोग करता हूं:

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

Comments

एकदम सही जवाब। धन्यवाद।

— अंजना सिल्वा

Answer 4

बूटस्ट्रैप 4 उपयोगिताओं के उपयोग के साथ आप क्षैतिज तत्व को 'ऑटो' में सेट करके क्षैतिज रूप से केंद्र कर सकते हैं।

ऑटो के लिए क्षैतिज मार्जिन सेट करने के लिए आप उपयोग कर सकते हैं mx-auto। mमार्जिन को संदर्भित करता है और x(+ बाएं से दाएं) x- अक्ष के पास भेजेगा और autoसेटिंग के पास भेजेगा। इसलिए यह बाएं मार्जिन और राइट मार्जिन को 'ऑटो' सेटिंग में सेट करेगा। ब्राउज़र्स मार्जिन की गणना समान रूप से करेंगे और तत्व को केंद्र में रखेंगे। सेटिंग केवल ब्लॉक तत्वों पर काम करेगी इसलिए डिस्प्ले: ब्लॉक को जोड़ने की आवश्यकता है और बूटस्ट्रैप उपयोगिताओं के साथ यह किया जाता है d-block।

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

आप इस जवाब के अनुसार पूरी तरह से ऑटो मार्जिन सेटिंग्स का समर्थन करने के लिए सभी ब्राउज़रों पर विचार कर सकते हैं : मार्जिन के लिए ब्राउज़र समर्थन: ऑटो इसलिए इसका उपयोग करना सुरक्षित है।

बूटस्ट्रैप 4 क्लास text-centerभी एक बहुत अच्छा उपाय है, हालाँकि इसके लिए पेरेंट रैपर तत्व की जरूरत होती है। ऑटो मार्जिन का उपयोग करने का लाभ यह है कि यह सीधे बटन तत्व पर ही किया जा सकता है।

Comments

यह मेरे लिए बूटस्ट्रैप 4 आधारित कोर UI प्रो व्यवस्थापक टेम्पलेट का उपयोग करके काम करता है

— sunitkatkar

Answer 5

text-centerबूटस्ट्रैप 4 के लिए मूल कंटेनर में वर्ग का उपयोग करें

Answer 6

मेरे लिए जो काम किया गया था (अपने सीएसएस पथ के लिए "css / style.css" को अनुकूलित करें):

हेड HTML:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

बॉडी HTML:

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

सीएसएस:

.mycentered-text {
    text-align:center
}

Answer 7

एक ढह गई नाव में एक बटन के लिए ऊपर कुछ भी मेरे लिए काम नहीं किया तो मेरी सीएसएस फ़ाइल में मैंने किया .....

.navbar button {
    margin:auto;
}

और यह काम किया !!

Answer 8

आप केवल एच-क्लास या पी क्लास के साथ टेक्स्ट-सेंटर विशेषता के साथ भी लपेट सकते हैं

Comments

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

— Gander