Twitter Bootstrap 3'te düğmeler nasıl ortalanır?

Twitter Bootstrap'ta bir form oluşturuyorum, ancak formdaki girdinin altındaki düğmeyi ortalamakla ilgili sorunlar yaşıyorum. Zaten center-blockdüğmeye düğmeye uygulamayı denedim ama işe yaramadı. Bunu nasıl düzeltmeliyim?

İşte kodum.

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

Düğmeyi div'de "text-center" sınıfıyla sarın.

Sadece bunu değiştirin:

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

Buna:

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

Düzenle

İtibariyle BootstrapV4 , center-blockdüştü # 19102 lehinem-*-auto

Twitter Bootstrap belgelerine göre: 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>

Sınıfın center-blockyaptığı tüm öğeye 0 otomatik kenar boşluğu olduğunu söylemek, otomatik sol / sağ kenar boşluklarıdır. Ancak, sınıf text-center veya css text-align: center; öğesi ana öğeye ayarlandığında, öğe bu otomatik hesaplamayı gerçekleştirme noktasını bilmez, bu nedenle beklendiği gibi kendini ortalamaz.

Yukarıdaki kod örneğini burada görebilirsiniz: 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>

tarzınıza ekleyin:

ekran: tablo; kenar boşluğu: 0 otomatik;

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

Kenar boşluğu vererek veya bu öğeleri kesinlikle konumlandırarak yapabilirsiniz.

Örneğin

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

0px üstten ve alttan, otomatik soldan ve sağdan olur.

Aşağıdaki kodu denedim ve benim için çalıştı.

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

Düğme kontrolü bir div içinde ve bootstrap'ın orta blok sınıfını kullanmak, düğmenin div'ın merkezine hizalanmasına yardımcı oldu

Merkez blok sınıfını bulacağınız bağlantıyı kontrol edin

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

Kullanım text-align: centercss özelliği

Bootstrap 4 Güncellemesi:

Flexbox'tan yararlanmak için düğmeyi 'd-flex' ve 'justify-content-center' yardımcı program sınıflarıyla bir div setiyle sarın.

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

Flexbox kullanmanın yararı, aynı eksende, ancak kendi ayrı hizalamalarıyla ek elemanlar / düğmeler ekleyebilmektir. Ayrıca 'align-items-start / center / end' sınıflarıyla dikey hizalama olasılığını da açar.

Etiketi ve düğmeyi, birbirleriyle hizalı tutmak için başka bir div ile sarabilirsiniz.

örneğin, https://codepen.io/anon/pen/BJoeRY?editors=1000

Aşağıdakileri yapabilirsiniz. Ayrıca düğmelerin çakışmasını da önler.

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

Benim için işe yarar <div>sonra bağımsız koymak yapmaya çalışır button. aynen böyle :

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

Ardından CSSStil sayfanıza gidin ve aşağıdakileri yapın Text-align:center:

#contactBtn{text-align: center;}

Bootstrap 3 için

boşluğu sütunlarla böleriz, 8 küçük sütun (col-xs-8) kullanırız, 4 boş sütun (col-xs-offset-4) bırakırız ve özelliği (merkez-blok) uygularız

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

Bootstrap 4 için

Boşluk kullanıyoruz, Bootstrap bir öğenin görünümünü değiştirmek için çok çeşitli kısaltılmış ve dolgulu yanıt marj programı sınıfları içerir. Sınıflar, xs için {property} {sides} - {size} ve sm, md, lg ve xl için {property} {sides} - {breakpoint} - {size} biçiminde adlandırılır.

daha fazla bilgi burada: 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>

Bu sorunu yaşadım. kullandım

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

Birkaç h3 satırı, birkaç h4 satırı ve bir Bootstrap düğmesi içeren div'imde. Metin merkezini kullandıktan sonra düğmenin dışındaki her şey merkeze atladı, bu yüzden Bootstrap'i geçersiz kılan CSS sayfama gittim ve düğmeye bir

margin: auto;

ki bu sorunu çözmüş görünüyor.

veya sadece bootstrap ızgara sistemi ile istediğiniz yerde düğme konumu yapmak için belirli ofsetler verebilirsiniz,

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

btn-block ayarlarsanız, bu şekilde düğme boyutunu belirtmenize izin verir. emin, bu sadece md boyut aralığında çalışacaktır, diğer boyutları da ayarlamak istiyorsanız, xs, sm, lg kullanın.