Bagaimana cara memusatkan tombol di Twitter Bootstrap 3?

Saya membuat formulir di Bootstrap Twitter tetapi saya mengalami masalah dengan memusatkan tombol di bawah input dalam formulir. Saya sudah mencoba menerapkan center-blockkelas ke tombol tetapi itu tidak berhasil. Bagaimana saya memperbaikinya?

Ini kode saya.

<!-- 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>

Bungkus Tombol dalam div dengan kelas "text-center".

Ubah saja ini:

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

Untuk ini:

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

Edit

Pada BootstrapV4 , center-blockdijatuhkan # 19102 untuk mendukungm-*-auto

Menurut dokumentasi Bootstrap Twitter: 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>

Semua kelas center-blocklakukan adalah untuk memberitahu elemen untuk memiliki margin 0 auto, otomatis menjadi margin kiri / kanan. Namun, kecuali class text-center atau css text-align: center; diatur pada induknya, elemen tidak tahu gunanya menghitung perhitungan otomatis ini sehingga tidak akan memusatkan dirinya seperti yang diharapkan.

Lihat contoh kode di atas di sini: https://jsfiddle.net/Seany84/2j9pxt1z/

<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>

tambahkan ke gaya Anda:

display: table; margin: 0 otomatis;

<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>

Anda dapat melakukannya dengan memberi margin atau memposisikan elemen-elemen itu secara absolut.

Sebagai contoh

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

0px akan dari atas dan bawah dan otomatis dari kiri dan kanan.

Saya mencoba kode berikut dan berhasil untuk saya.

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

Kontrol tombol dalam div dan menggunakan kelas blok-tengah bootstrap membantu saya untuk menyelaraskan tombol ke pusat div

Periksa tautan di mana Anda akan menemukan kelas blok-tengah

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

gunakan text-align: centerproperti css

Pembaruan untuk Bootstrap 4:

Bungkus tombol dengan set div dengan kelas utilitas 'd-flex' dan 'justify-content-center' untuk memanfaatkan flexbox.

<!-- 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>

Manfaat menggunakan flexbox adalah dapat menambahkan elemen / tombol tambahan pada sumbu yang sama, tetapi dengan perataan yang terpisah. Ini juga membuka kemungkinan penyelarasan vertikal dengan kelas 'align-items-start / center / end' juga.

Anda bisa membungkus label dan tombol dengan div lain agar tetap selaras satu sama lain.

mis. https://codepen.io/anon/pen/BJoeRY?editors=1000

Anda dapat melakukan hal berikut. Ini juga menghindari tombol yang tumpang tindih.

<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>

Ini berhasil bagi saya mencoba membuat independen <div>lalu memasukkan buttonke dalamnya seperti ini :

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

Kemudian Pergi ke CSShalaman Style Anda dan lakukan hal Text-align:centerseperti ini:

#contactBtn{text-align: center;}

Untuk Bootstrap 3

kita membagi ruang dengan kolom, kita menggunakan 8 kolom kecil (col-xs-8), kita meninggalkan 4 kolom kosong (col-xs-offset-4) dan kita menerapkan properti (blok-tengah)

<!--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>

Untuk Bootstrap 4

Kami menggunakan Spacing, Bootstrap mencakup berbagai kelas utilitas margin respons yang disingkat dan diisi untuk memodifikasi tampilan elemen. Kelas-kelas tersebut dinamai menggunakan format {properti} {sisi} - {ukuran} untuk xs dan {properti} {sisi} - {breakpoint} - {ukuran} untuk sm, md, lg, dan xl.

info lebih lanjut di sini: 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>

Saya punya masalah ini. Saya menggunakan

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

Pada div saya mengandung beberapa baris h3, beberapa baris h4 dan tombol Bootstrap. Semuanya selain tombol melompat ke tengah setelah saya menggunakan pusat teks jadi saya pergi ke lembar CSS saya menimpa Bootstrap dan memberi tombol

margin: auto;

yang tampaknya telah menyelesaikan masalah.

atau Anda dapat memberikan offset khusus untuk membuat posisi tombol di mana Anda inginkan hanya dengan sistem grid bootstrap,

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

dengan cara ini, Anda juga dapat menentukan ukuran tombol jika Anda mengatur btn-block. tentu, ini hanya akan bekerja kisaran ukuran md, jika Anda ingin mengatur ukuran lain juga, gunakan xs, sm, lg.